:root{color-scheme:dark;--ink:#080909;--cream:#d5d0c6;--lime:#d0ed63;--muted:#8a8983;font-family:'Courier New',monospace;background:var(--ink);color:var(--cream)}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button{border:0;background:none}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--lime);outline-offset:6px}button:hover{color:var(--lime)}button:disabled{cursor:wait}main{position:relative;isolation:isolate;height:100svh;min-height:560px;overflow:hidden;background:#080909}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.scene-motion{position:absolute;inset:-3px;z-index:-3;animation:stillness 24s ease-in-out infinite;transform-origin:50% 57%}.scene{position:absolute;width:100%;height:100%;object-fit:cover;object-position:50% 43%;opacity:0;transition:opacity 1.35s ease;filter:brightness(.94)}.scene.active{opacity:1}.passing-light{position:absolute;inset:0;background:linear-gradient(105deg,transparent 20%,#b5bfa512 47%,transparent 65%);mix-blend-mode:screen;opacity:0;animation:headlights 37s ease-in-out infinite}.vignette{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(#080909dd 0%,transparent 15%,transparent 62%,#08090966 76%,#080909 99%)}
.header{height:104px;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:0 4.1% 0 6.5%;background:linear-gradient(#080909e8,#08090999,transparent)}.brand{display:block;width:140px;height:78px;flex-shrink:0;background-image:url('assets/selfies-brush-logo.png');background-size:168px 168px;background-position:-14px -47px;background-repeat:no-repeat;mix-blend-mode:screen}.header nav{display:flex;gap:clamp(20px,4.6vw,72px);margin-left:auto;margin-right:auto}.nav-link{font-size:14px;letter-spacing:.2em;padding:16px 0;position:relative}.nav-link.selected{color:var(--lime)}.nav-link.selected:after{content:'';height:1px;position:absolute;bottom:5px;left:0;right:0;background:var(--lime)}.wallet{border:1px solid #b8ca64;border-radius:11px;letter-spacing:.1em;font-size:13px;padding:16px 22px;white-space:nowrap}.wallet span{margin-left:12px}.side-index{position:absolute;top:18%;left:2.2%;display:flex;flex-direction:column;gap:18px;color:#646762;font-size:12px}.selected{color:var(--lime)}.side-index i{width:1px;height:190px;margin:6px 0 0 6px;background:linear-gradient(#6e7265,transparent)}
.recording{position:absolute;right:4.4%;top:18%;font-size:20px;letter-spacing:.05em;display:flex;align-items:center;gap:8px}.rec-dot{width:14px;height:14px;border-radius:50%;background:#ce2633;box-shadow:0 0 15px #ce263312;animation:rec 8s ease-in-out infinite}.frame-corner{position:absolute;width:38px;height:38px;border-color:#bdbdb855}.frame-corner.top{right:-17px;top:-34px;border-top:1px solid;border-right:1px solid}.frame-corner.bottom{left:-80px;bottom:-34px;border-left:1px solid;border-bottom:1px solid}
.mint-area{position:absolute;right:4.3%;top:46%;width:18.4%;min-width:200px}.tagline{text-align:right;font-size:12px;line-height:1.8;letter-spacing:.34em;color:#9a9992;margin:0 0 54px}.mint-button{position:relative;width:100%;height:94px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;color:var(--lime);background:#0709085c;transition:background .5s}.mint-button:before,.mint-button:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--lime),var(--lime)) left top/34px 1px no-repeat,linear-gradient(var(--lime),var(--lime)) right top/34px 1px no-repeat,linear-gradient(var(--lime),var(--lime)) left bottom/34px 1px no-repeat,linear-gradient(var(--lime),var(--lime)) right bottom/34px 1px no-repeat}.mint-button:after{background:linear-gradient(var(--lime),var(--lime)) left top/1px 34px no-repeat,linear-gradient(var(--lime),var(--lime)) right top/1px 34px no-repeat,linear-gradient(var(--lime),var(--lime)) left bottom/1px 34px no-repeat,linear-gradient(var(--lime),var(--lime)) right bottom/1px 34px no-repeat}.mint-button:hover{background:#d0ed6315}.mint-button span{font-size:28px;letter-spacing:.5em}.mint-button svg{width:43px;stroke:var(--cream);fill:none;stroke-width:1;transition:transform .5s}.mint-button:hover svg{transform:translateX(4px)}.edition{text-align:right;font-size:13px;margin-top:22px;letter-spacing:.1em}.dim{color:var(--muted);font-size:11px}
.gallery{position:absolute;bottom:64px;left:2.2%;right:2.2%}.gallery-heading{display:flex;justify-content:space-between;margin:0 4.4% 12px;font-size:10px;letter-spacing:.17em;color:#b9b9af}.gallery-row{display:flex;align-items:center;gap:22px}.arrow{border:1px solid #cccac0;border-radius:50%;width:42px;height:42px;flex-shrink:0;font:32px/1 Georgia,serif;padding-bottom:5px;transition:border-color .3s,background .3s}.arrow:hover{border-color:var(--lime);background:#d0ed6310}.thumbnails{display:flex;gap:10px;flex:1;min-width:0}.thumbnail{position:relative;height:clamp(110px,16vh,164px);flex:1;min-width:0;border:1px solid #76766a55;overflow:hidden;padding:0;background:#131411;transition:border-color .5s,filter .5s}.thumbnail img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;filter:brightness(.47);transition:filter .6s,transform 1.2s}.thumbnail:hover img{filter:brightness(.8);transform:scale(1.025)}.thumbnail.selected{border:1px solid var(--lime);box-shadow:0 0 13px #d0ed6324}.thumbnail.selected img{filter:brightness(.85)}.thumbnail span{position:absolute;bottom:0;left:0;right:0;text-align:left;padding:22px 13px 10px;background:linear-gradient(transparent,#080909e6);font-size:10px;letter-spacing:.08em}.thumbnail b{font-weight:400;margin-left:16px;color:#c4c6b9}.footer{position:absolute;bottom:20px;left:6.5%;right:4.3%;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:9px;letter-spacing:.1em}.sound-controls{display:flex;align-items:center;gap:16px}#sound{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:9px;letter-spacing:.1em}.sound-bars{height:13px;display:flex;align-items:center;gap:2px}.sound-bars i{height:4px;width:2px;background:var(--lime)}.sound-bars i:nth-child(2){height:12px}.sound-bars i:nth-child(3){height:8px}body[data-sound-state=playing] .sound-bars i{animation:equalizer 2s ease-in-out infinite alternate}body[data-sound-state=playing] .sound-bars i:nth-child(2){animation-delay:-.7s}body[data-sound-state=muted] .sound-bars i{height:2px;background:#777}#sound-hint{font-size:10px;color:#a8ab98;padding:6px 0;text-decoration:underline;text-underline-offset:4px}.progress{display:flex;gap:8px;position:absolute;left:46%;}.progress i{width:36px;height:2px;background:#5a5c55}.progress i.selected{background:var(--lime)}.living{color:#93978a;font-size:9px}.living span{color:#60645c;margin-left:18px}
dialog{background:#111410;color:var(--cream);border:1px solid #d0ed6344;padding:52px;width:min(480px,calc(100% - 32px));max-height:85svh;box-shadow:0 24px 100px #0008}dialog::backdrop{background:#030504b8;backdrop-filter:blur(8px)}.close-dialog:not(.dialog-action){position:absolute;right:14px;top:10px;font:28px Arial}.dialog-eyebrow{font-size:10px;letter-spacing:.15em;color:var(--lime)}dialog h2{font:48px/.98 Impact,'Arial Narrow',sans-serif;letter-spacing:-.03em;text-transform:uppercase;margin:28px 0}dialog p{font:14px/1.7 Arial,sans-serif;color:#b2b6aa}.dialog-action{width:100%;border:1px solid var(--lime);padding:17px;margin-top:24px;color:var(--lime);font-size:11px;letter-spacing:.08em}details{border-top:1px solid #ffffff20;padding:16px 0;font:14px Arial,sans-serif}summary{cursor:pointer}details p{margin-bottom:0}
@keyframes stillness{0%,100%{transform:scale(1.008) translate(0,0)}50%{transform:scale(1.012) translate(-1px,2px)}}@keyframes headlights{0%,65%,100%{opacity:0;transform:translateX(-30%)}78%{opacity:.4}92%{opacity:0;transform:translateX(30%)}}@keyframes rec{0%,100%{opacity:.88}50%{opacity:.68}}@keyframes equalizer{to{transform:scaleY(.5)}}
@media(min-aspect-ratio:17/10) and (min-width:901px){.scene{object-position:50% 32%}.tagline{margin-bottom:25px}.mint-area{top:40%}.gallery{bottom:54px}.thumbnail{height:115px}.header{height:85px}}
@media(max-width:900px){.header{height:90px;padding:0 5%;gap:18px}.brand{width:115px;transform:scale(.8);transform-origin:left center;margin-right:-20px}.header nav{gap:24px;margin:0 auto}.nav-link{font-size:11px}.wallet{font-size:10px;padding:13px 14px}.wallet span{display:none}.mint-area{right:5%;top:48%;width:210px}.tagline{margin-bottom:25px}.gallery{left:3%;right:3%}.gallery-row{gap:14px}.footer{left:5%;right:5%}.living span{display:none}.progress{display:none}.side-index{left:3%}.scene{object-position:50% 40%}}
@media(max-width:600px){main{min-height:520px}.header{height:78px;padding:0 20px;gap:10px}.brand{transform:scale(.65);width:102px;margin-right:-30px}.header nav{gap:20px;margin:0 0 0 auto}.nav-link{font-size:10px;letter-spacing:.12em}.nav-link[data-open="mint-dialog"],.wallet{display:none}.scene-motion{inset:0 -30%;}.scene{object-fit:cover;object-position:50% 31%;filter:brightness(.9)}.vignette{background:linear-gradient(#080909dd,transparent 15%,transparent 47%,#08090966 64%,#080909 91%)}.recording{top:112px;right:28px;font-size:12px}.rec-dot{width:8px;height:8px}.frame-corner{display:none}.side-index{top:125px;left:21px;font-size:10px;gap:14px}.side-index i{height:90px}.mint-area{top:auto;bottom:236px;right:22px;width:166px;min-width:0}.tagline{font-size:9px;line-height:1.65;letter-spacing:.25em;margin-bottom:20px}.mint-button{height:62px;padding:0 20px}.mint-button span{font-size:19px;letter-spacing:.38em}.mint-button svg{width:28px}.mint-button:before{background-size:22px 1px}.mint-button:after{background-size:1px 22px}.edition{font-size:10px;margin-top:12px}.gallery{bottom:84px;left:20px;right:20px}.gallery-heading{margin:0 0 10px;font-size:8px;letter-spacing:.07em}.gallery-row{gap:8px}.arrow{position:absolute;bottom:-31px;width:24px;height:24px;font-size:22px;padding-bottom:4px}#previous{left:0}#next{right:0}.thumbnails{gap:7px}.thumbnail{height:105px;flex:1}.thumbnail img{width:170%;max-width:none;left:-35%;object-position:center 42%}.thumbnail span{padding:15px 8px 6px;font-size:9px}.thumbnail b{display:none}.footer{bottom:17px;left:20px;right:20px;gap:5px}.sound-controls{gap:8px;align-items:flex-start;flex-direction:column}#sound{font-size:8px;padding:0}#sound-hint{font-size:9px;padding:0}.living{font-size:7px;align-self:flex-end;letter-spacing:.03em}dialog{padding:35px 26px}}
@media(max-height:700px) and (max-width:600px){.mint-area{bottom:205px}.tagline{display:none}.gallery{bottom:78px}.thumbnail{height:88px}.recording{top:90px}.side-index{top:103px}.scene{object-position:50% 25%}.header{height:68px}}
@media(max-height:500px) and (min-width:601px){main{min-height:360px}.header{height:63px}.brand{transform:scale(.6)}.recording{top:96px;font-size:12px}.rec-dot{width:8px;height:8px}.tagline,.side-index,.gallery-heading{display:none}.mint-area{top:38%;width:160px;min-width:0}.mint-button{height:60px;padding:0 15px}.mint-button span{font-size:20px}.mint-button svg{width:28px}.edition{margin-top:10px}.gallery{bottom:40px;left:5%;right:5%}.thumbnail{height:75px}.footer{bottom:9px}.arrow{width:30px;height:30px;font-size:24px}.scene{object-position:50% 28%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body[data-hidden=true] *{animation-play-state:paused!important}
/* Keep the complete original wordmark and frame portraits at mobile sizes. */
.brand{mix-blend-mode:lighten}
.thumbnail img{width:150%;height:200%;left:-25%;top:-50%;object-position:50% 50%}
@media(max-width:900px){.brand{width:140px;margin-right:-28px}}
@media(max-width:600px){.brand{width:140px;margin-right:-49px}.scene-motion{inset:80px -35% auto;aspect-ratio:3/2}.scene{object-fit:contain;object-position:center}.thumbnail img{width:170%;height:160%;left:-35%;top:-22%}.tagline{display:none}}
@media(max-height:700px) and (max-width:600px){.scene-motion{top:65px}}
@media(max-height:500px) and (min-width:601px){.brand{margin-right:-56px}}
@media(max-height:700px) and (max-width:600px){.mint-area{bottom:183px}}