@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{--bg:#05070b;--bg2:#0a0f18;--card:rgba(15,22,34,.55);--glass:rgba(15,22,34,.42);--text:#f7fbff;--muted:#9ba8b8;--dim:#657386;--line:rgba(255,255,255,.12);--soft:rgba(255,255,255,.065);--blue:#62a9ff;--cyan:#72e4ff;--purple:#9d7cff;--shadow:0 28px 90px rgba(0,0,0,.38);--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}html{background:var(--bg);color:var(--text);scroll-behavior:smooth;overscroll-behavior-x:none}body{margin:0;min-width:320px;background:radial-gradient(circle at 75% 0%,rgba(50,120,255,.10),transparent 28%),linear-gradient(180deg,var(--bg),var(--bg2));color:var(--text);font-family:'DM Sans',sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}body.lock{overflow:hidden}body.light{--bg:#f4f8ff;--bg2:#e9f0fa;--card:rgba(255,255,255,.58);--glass:rgba(255,255,255,.46);--text:#0b1220;--muted:#536274;--dim:#7b8797;--line:rgba(15,35,65,.14);--soft:rgba(15,35,65,.07);--shadow:0 28px 80px rgba(52,78,115,.18)}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer}::selection{background:var(--blue);color:white}img{user-select:none;-webkit-user-drag:none}.site-flash{position:fixed;left:50%;bottom:10px;z-index:1001;width:74px;height:3px;transform:translateX(-50%);border-radius:99px;background:linear-gradient(90deg,transparent,#fff,transparent);box-shadow:0 0 18px rgba(255,255,255,.75);opacity:.8;pointer-events:none}.header{position:fixed;top:12px;left:14px;right:14px;height:60px;z-index:100;display:flex;align-items:center;padding:0 12px 0 16px;border:1px solid transparent;transition:.45s var(--ease)}.header.scrolled{background:var(--glass);border-color:var(--line);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border-radius:22px;box-shadow:0 15px 55px rgba(0,0,0,.16)}.brand{display:flex;align-items:center;gap:9px;font:800 10px 'Manrope';letter-spacing:.13em}.brand-mark{width:32px;height:32px;border:1px solid var(--line);border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(98,169,255,.2),rgba(157,124,255,.1));backdrop-filter:blur(14px);transition:.5s var(--ease)}.brand:hover .brand-mark{transform:rotate(8deg) scale(1.05)}.header-actions{margin-left:auto;display:flex;gap:8px}.glass-btn{border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);box-shadow:inset 0 1px rgba(255,255,255,.08),0 10px 35px rgba(0,0,0,.16);transition:.4s var(--ease)}.glass-btn:hover{transform:translateY(-2px);border-color:rgba(98,169,255,.5);box-shadow:0 12px 40px rgba(35,117,255,.16)}.fx,.theme-toggle{width:40px;height:40px;border-radius:14px;font:800 9px 'Manrope'}.menu{width:42px;height:42px;border-radius:14px;position:relative}.menu span,.menu:before,.menu:after{content:"";position:absolute;left:50%;width:16px;height:1.5px;background:currentColor;transform:translateX(-50%);transition:.55s var(--ease)}.menu span{top:50%}.menu:before{top:calc(50% - 6px)}.menu:after{top:calc(50% + 6px)}.menu.open span{transform:translateX(-50%) rotate(45deg)}.menu.open:before{transform:translateX(-50%) rotate(-45deg);top:50%}.menu.open:after{opacity:0}.nav{position:fixed;inset:0;z-index:90;background:rgba(2,6,14,.36);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;visibility:hidden;transition:.35s ease}.nav.open{opacity:1;visibility:visible}.nav-card{position:absolute;top:78px;right:14px;bottom:auto;width:min(560px,calc(100% - 28px));max-height:calc(100svh - 92px);overflow:auto;border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,rgba(24,34,52,.88),rgba(8,13,23,.9));box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.09);padding:24px;transform:translateY(-12px) scale(.98);transition:.55s var(--ease)}body.light .nav-card{background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(234,241,250,.9))}.nav.open .nav-card{transform:none}.nav-links{display:grid;grid-template-columns:1fr 1fr;gap:6px}.nav-link{display:flex;align-items:center;justify-content:space-between;padding:16px 14px;border:1px solid transparent;border-radius:16px;color:var(--muted);font:800 clamp(20px,3vw,30px)/1 'Manrope';letter-spacing:-.055em;transition:.35s var(--ease)}.nav-link:hover,.nav-link.active{color:var(--text);background:rgba(98,169,255,.09);border-color:rgba(98,169,255,.18);transform:none}.nav-link small{font:800 8px 'Manrope';letter-spacing:.12em;color:var(--dim)}.nav-foot{margin-top:18px;padding-top:15px;border-top:1px solid var(--soft);display:flex;justify-content:space-between;gap:10px;color:var(--dim);font:8px 'Manrope';letter-spacing:.12em;text-transform:uppercase}.cover{position:fixed;inset:0;background:linear-gradient(120deg,#07101d,#0b1730,#10101d);z-index:200;transform:translateY(105%);pointer-events:none}.cover.go{animation:cover .62s var(--ease) forwards}@keyframes cover{0%{transform:translateY(105%)}45%{transform:translateY(0)}100%{transform:translateY(-105%)}}.hero{height:100svh;min-height:600px;position:relative;overflow:hidden;background:#02050a;isolation:isolate}.hero-img{position:absolute;inset:-5%;width:110%;height:110%;object-fit:cover;object-position:54% 47%;filter:brightness(.58) contrast(1.08) saturate(.85);transform:scale(1.04);will-change:transform}.hero-vignette{position:absolute;inset:0;background:radial-gradient(circle at 78% 18%,rgba(95,180,255,.22),transparent 25%),linear-gradient(180deg,rgba(2,5,10,.08),rgba(2,5,10,.18) 45%,rgba(2,5,10,.86) 100%);z-index:1}.hero-glow{position:absolute;width:45vw;height:45vw;right:3%;top:7%;border-radius:50%;background:radial-gradient(circle,rgba(80,170,255,.18),rgba(157,124,255,.07),transparent 67%);filter:blur(22px);z-index:2;pointer-events:none}.hero-3d{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;mix-blend-mode:screen;opacity:.66}.hero-bottom{position:absolute;left:clamp(16px,3vw,36px);right:clamp(16px,3vw,36px);bottom:22px;z-index:5;display:flex;justify-content:space-between;align-items:end}.hero-note{font:800 8px 'Manrope';letter-spacing:.14em;color:rgba(255,255,255,.5);text-transform:uppercase}.scroll-btn{width:42px;height:42px;border-radius:15px;border:1px solid rgba(255,255,255,.2);background:rgba(10,16,24,.32);backdrop-filter:blur(14px);display:grid;place-items:center;animation:float 3s ease-in-out infinite}.scroll-btn i{width:7px;height:7px;border-right:1px solid white;border-bottom:1px solid white;transform:rotate(45deg) translate(-1px,-1px)}@keyframes float{50%{transform:translateY(-5px)}}.section{padding:clamp(85px,12vw,150px) clamp(18px,7vw,110px);position:relative}.section.alt{background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(98,169,255,.025))}.kicker{font:800 8px 'Manrope';letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}.display{font:800 clamp(50px,8vw,118px)/.84 'Manrope';letter-spacing:-.085em;margin:18px 0 0}.lead{font:800 clamp(27px,4vw,55px)/1.04 'Manrope';letter-spacing:-.05em;max-width:850px}.body{font-size:14px;line-height:1.85;color:var(--muted);max-width:680px}.grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,8vw,120px);align-items:end}.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:70px}.stat{padding:25px 18px 25px 0;border-top:1px solid var(--soft);transition:.45s var(--ease)}.stat:hover{transform:translateY(-5px)}.stat b{font:800 clamp(38px,5vw,70px)/1 'Manrope';letter-spacing:-.08em}.stat span{display:block;margin-top:9px;font:800 8px 'Manrope';letter-spacing:.13em;color:var(--muted);text-transform:uppercase}.project-list{margin-top:60px}.project{display:grid;grid-template-columns:45px 1fr 190px;gap:20px;align-items:center;padding:28px 0;border-top:1px solid var(--soft);position:relative;transition:.5s var(--ease)}.project:last-child{border-bottom:1px solid var(--soft)}.project:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(98,169,255,.09),transparent 70%);opacity:0;transition:.4s}.project>*{position:relative}.project:hover{padding-left:16px}.project:hover:before{opacity:1}.project-name{font:800 clamp(27px,4vw,62px)/1 'Manrope';letter-spacing:-.06em}.project-type{text-align:right;font:800 8px 'Manrope';letter-spacing:.13em;color:var(--muted);text-transform:uppercase}.project-num{font:800 8px 'Manrope';color:var(--dim)}.social-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:38px}.social{border:1px solid var(--line);background:var(--glass);border-radius:999px;padding:11px 14px;font:800 8px 'Manrope';letter-spacing:.12em;text-transform:uppercase;transition:.4s var(--ease);backdrop-filter:blur(16px)}.social:hover{transform:translateY(-3px);background:rgba(98,169,255,.1);border-color:rgba(98,169,255,.35)}.thought-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:65px}.thought{border:1px solid var(--line);border-radius:22px;padding:26px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.012));backdrop-filter:blur(16px);transition:.5s var(--ease)}.thought:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.thought-meta{font:800 8px 'Manrope';color:var(--muted);letter-spacing:.13em;text-transform:uppercase}.thought h3{font:800 25px 'Manrope';letter-spacing:-.045em;margin:26px 0 12px}.thought p{color:var(--muted);line-height:1.75;margin:0}.modules{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:65px}.module{background:rgba(8,12,19,.7);padding:28px;min-height:250px;transition:.5s var(--ease)}body.light .module{background:rgba(255,255,255,.62)}.module:hover{transform:translateY(-4px)}.module h3{font:800 9px 'Manrope';letter-spacing:.15em;color:var(--muted);margin:0 0 25px}.skill{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--soft);font-size:13px}.skill span:last-child{font:800 8px 'Manrope';color:var(--dim)}.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:220px;gap:12px;margin-top:55px}.gallery-card{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card);position:relative;cursor:zoom-in;min-height:0}.gallery-card:nth-child(3n){grid-row:span 2}.gallery-card img{width:100%;height:100%;object-fit:cover;display:block;transition:.7s var(--ease);filter:brightness(.78) saturate(.9)}.gallery-card:hover img{transform:scale(1.06);filter:brightness(.98) saturate(1.05)}.gallery-card figcaption{position:absolute;left:10px;right:10px;bottom:10px;padding:9px 11px;border-radius:12px;background:rgba(4,8,14,.52);backdrop-filter:blur(14px);font:700 9px 'Manrope';letter-spacing:.04em}.lightbox{position:fixed;inset:0;background:rgba(2,5,10,.82);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);z-index:180;display:none;place-items:center;padding:25px}.lightbox.open{display:grid}.lightbox img{max-width:100%;max-height:82svh;object-fit:contain;border-radius:18px;box-shadow:var(--shadow)}.lb-close{position:absolute;right:10px;top:-48px;border-radius:999px;padding:8px 12px}.form{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:45px}.field{display:flex;flex-direction:column;gap:9px}.field.full{grid-column:1/-1}.field label{font:800 8px 'Manrope';color:var(--muted);letter-spacing:.14em}.field input,.field textarea,.field select{background:transparent;border:0;border-bottom:1px solid var(--line);outline:0;padding:13px 0;color:var(--text)}.field textarea{min-height:150px;resize:vertical}.submit,.primary-btn,.secondary-btn,.upload-btn{border:1px solid var(--line);background:var(--glass);border-radius:999px;padding:13px 18px;font:800 9px 'Manrope';letter-spacing:.12em;transition:.4s;backdrop-filter:blur(16px)}.submit:hover,.primary-btn:hover,.secondary-btn:hover,.upload-btn:hover{transform:translateY(-2px);border-color:rgba(98,169,255,.45);background:rgba(98,169,255,.1)}.glass-panel{border:1px solid var(--line);border-radius:24px;background:var(--glass);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);box-shadow:inset 0 1px rgba(255,255,255,.06),var(--shadow)}.auth-section{max-width:800px;margin:0 auto;padding-top:150px}.auth-card{margin-top:45px;padding:28px}.auth-card label{display:grid;gap:8px;font:800 8px 'Manrope';letter-spacing:.12em;color:var(--muted);margin-bottom:20px}.auth-card input{padding:14px 0;border:0;border-bottom:1px solid var(--line);background:transparent;outline:0}.auth-actions{display:flex;gap:10px;flex-wrap:wrap}.form-status{min-height:20px;color:var(--muted);font-size:12px}.composer{padding:22px;margin-top:42px}.user-row{display:flex;align-items:center;gap:12px}.avatar{width:42px;height:42px;border-radius:14px;object-fit:cover;border:1px solid var(--line)}.user-row strong{display:block}.user-row small{display:block;color:var(--dim);font-size:11px;margin-top:3px}.composer textarea{width:100%;min-height:130px;margin:18px 0;padding:15px;border:1px solid var(--line);border-radius:18px;background:rgba(0,0,0,.12);outline:0;resize:vertical}.composer-row{display:flex;justify-content:space-between;gap:12px;align-items:center}.feed{display:grid;gap:16px;max-width:900px;margin:auto}.post-card{padding:22px}.post-card>p{line-height:1.7;color:var(--muted);white-space:pre-wrap}.post-image{width:100%;max-height:520px;object-fit:cover;border-radius:18px;border:1px solid var(--line);margin-top:8px}.post-actions{display:flex;gap:8px;margin-top:12px}.post-actions button,.comment-form button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:8px 12px;font-size:11px;color:var(--muted)}.post-actions button:hover,.comment-form button:hover{background:rgba(98,169,255,.1);color:var(--text)}.comments{display:grid;gap:8px;margin-top:14px}.comment{padding:9px 12px;border-left:2px solid rgba(98,169,255,.35);background:rgba(255,255,255,.025);border-radius:0 12px 12px 0;font-size:12px}.comment b{margin-right:7px}.comment-form{display:flex;gap:8px;margin-top:12px}.comment-form input{flex:1;min-width:0;border:1px solid var(--line);border-radius:999px;background:transparent;padding:9px 12px;outline:0}.social-dock{position:fixed;right:16px;bottom:16px;z-index:80;display:flex;gap:7px;padding:7px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(20px);border-radius:18px;box-shadow:var(--shadow)}.social-dock a{width:32px;height:32px;display:grid;place-items:center;border-radius:11px;font-size:14px;font-weight:800;transition:.3s}.social-dock a:hover{background:rgba(98,169,255,.14);transform:translateY(-3px)}.footer{padding:80px clamp(18px,7vw,110px) 28px}.footer-title{font:800 clamp(65px,12vw,170px)/.8 'Manrope';letter-spacing:-.09em}.footer-row{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--soft);margin-top:55px;padding-top:15px;color:var(--dim);font:800 8px 'Manrope';letter-spacing:.12em}.reveal{opacity:0;transform:translateY(28px) scale(.985);transition:opacity .8s var(--ease),transform .8s var(--ease)}.reveal.in{opacity:1;transform:none}.delay1{transition-delay:.07s}.delay2{transition-delay:.14s}.delay3{transition-delay:.21s}.page-swipe{animation:pageSwipe .7s var(--ease)}@keyframes pageSwipe{from{opacity:.55;transform:scale(.985)}to{opacity:1;transform:none}}@media(max-width:800px){.nav-links{grid-template-columns:1fr}.nav-card{top:76px;max-height:calc(100svh - 88px);padding:14px}.nav-link{font-size:23px;padding:13px}.nav-foot{display:none}.grid2{grid-template-columns:1fr;gap:28px}.stats{grid-template-columns:repeat(2,1fr);margin-top:48px}.project{grid-template-columns:30px 1fr}.project-type{display:none}.thought-grid,.modules{grid-template-columns:1fr}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:180px}.gallery-card:nth-child(3n){grid-row:span 1}.form{grid-template-columns:1fr}.field.full{grid-column:auto}.social-dock{left:50%;right:auto;transform:translateX(-50%);bottom:10px}.footer{padding-bottom:100px}.footer-row{flex-direction:column}.hero-img{object-position:57% 45%}}@media(max-width:480px){.header{left:9px;right:9px;top:8px}.brand span:last-child{display:none}.hero{min-height:560px}.section{padding-left:18px;padding-right:18px}.display{font-size:52px}.gallery{gap:8px;grid-auto-rows:150px}.gallery-card{border-radius:14px}.composer-row{align-items:stretch;flex-direction:column}.upload-btn,.primary-btn{width:100%;text-align:center}.social-dock a{width:30px;height:30px}.site-flash{bottom:5px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important}.reveal{opacity:1;transform:none}}

/* V8 PERFORMANCE + LIQUID BLUE GLASS */
:root{--blue:#4d9cff;--cyan:#78dcff;--purple:#7c8cff;--ease:cubic-bezier(.22,1,.36,1)}
html{scroll-behavior:auto;background:var(--bg);touch-action:pan-y;overscroll-behavior-x:none}
body{background:radial-gradient(900px 520px at 78% -8%,rgba(55,140,255,.13),transparent 62%),radial-gradient(700px 480px at 0% 50%,rgba(40,90,255,.055),transparent 65%),var(--bg);}
body.light{--bg:#eef5ff;--bg2:#e8f1ff;--card:rgba(255,255,255,.7);--glass:rgba(255,255,255,.62);--text:#07111f;--muted:#52657d;--dim:#7d8da3;--line:rgba(29,72,125,.14);--soft:rgba(29,72,125,.08);--shadow:0 24px 70px rgba(38,88,150,.16);background:radial-gradient(900px 520px at 78% -8%,rgba(53,133,255,.18),transparent 62%),linear-gradient(180deg,#f8fbff,#e9f2ff)}
button,a,.upload-btn{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:active,.upload-btn:active,.nav-link:active,.social:active{transform:scale(.97)!important}
.header{will-change:transform;transform:translateZ(0)}
.header.scrolled{background:rgba(8,15,27,.62);backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%)}
body.light .header.scrolled{background:rgba(245,250,255,.68)}
.nav{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav-card{background:linear-gradient(145deg,rgba(14,25,43,.94),rgba(5,11,20,.95));backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%)}
.nav-link{transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s var(--ease)}
.nav-link:hover,.nav-link.active{background:linear-gradient(100deg,rgba(77,156,255,.14),rgba(124,140,255,.06));border-color:rgba(77,156,255,.25)}
.glass-btn,.glass-panel,.social-dock,.gallery-card{box-shadow:inset 0 1px rgba(255,255,255,.07),0 18px 55px rgba(0,0,0,.14)}
.glass-panel,.gallery-card,.thought{backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%)}
/* Avoid expensive continuous animations on every frame. */
.hero-img{will-change:transform;transform:scale(1.035) translate3d(0,0,0)}
.hero-glow{filter:blur(14px)}
.hero-3d{opacity:.42}
.reveal{transition:opacity .55s var(--ease),transform .55s var(--ease)}
.page-swipe{animation:pageSwipe .42s var(--ease)}
@keyframes pageSwipe{from{opacity:.72;transform:translate3d(0,12px,0) scale(.992)}to{opacity:1;transform:none}}
.site-flash{height:2px;width:84px;opacity:.9}
/* Facebook-style visual feed */
.gallery-feed{width:min(960px,100%);margin:48px auto 0;display:grid;gap:18px}
.gallery-post{overflow:hidden;border:1px solid var(--line);border-radius:26px;background:linear-gradient(145deg,rgba(20,31,48,.72),rgba(7,13,23,.62));box-shadow:0 20px 60px rgba(0,0,0,.18);animation:cardIn .6s var(--ease) both}
body.light .gallery-post{background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(238,246,255,.72))}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.gallery-post-head{display:flex;align-items:center;gap:12px;padding:18px 20px 12px}.gallery-post-head .avatar{width:42px;height:42px;border-radius:14px}.gallery-post-head strong{font:800 13px 'Manrope'}.gallery-post-head small{display:block;color:var(--dim);font-size:10px;margin-top:3px}
.gallery-post-text{padding:0 20px 15px;margin:0;color:var(--muted);line-height:1.65;font-size:13px}.gallery-post-media{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:#07101d;cursor:zoom-in;transition:transform .55s var(--ease),filter .55s ease}.gallery-post:hover .gallery-post-media{filter:saturate(1.08) brightness(1.03)}
.gallery-post-tools{display:flex;gap:8px;padding:11px 14px;border-top:1px solid var(--soft);border-bottom:1px solid var(--soft)}.gallery-post-tools button{flex:1;border:0;background:transparent;color:var(--muted);border-radius:12px;padding:10px 8px;font-size:12px;transition:background .2s ease,color .2s ease}.gallery-post-tools button:hover{background:rgba(77,156,255,.10);color:var(--text)}.gallery-post-tools button.active{color:#72b8ff;background:rgba(77,156,255,.11)}
.gallery-comments{padding:10px 14px 14px;display:grid;gap:8px}.gallery-comment{font-size:12px;line-height:1.45;padding:9px 12px;border-radius:14px;background:rgba(255,255,255,.035)}.gallery-comment b{margin-right:6px}.gallery-comment-form{display:flex;gap:8px;padding:0 14px 16px}.gallery-comment-form input{flex:1;min-width:0;border:1px solid var(--line);background:rgba(0,0,0,.10);border-radius:999px;padding:10px 13px;outline:0}.gallery-comment-form button{border:1px solid rgba(77,156,255,.25);background:rgba(77,156,255,.10);border-radius:999px;padding:0 15px;color:var(--text)}
.gallery-login-note{text-align:center;color:var(--dim);font-size:11px;padding:4px 14px 15px}.gallery-login-note a{color:#72b8ff;font-weight:800}
.lightbox{background:rgba(2,5,12,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.lightbox img{max-width:min(1100px,94vw);max-height:84svh;border-radius:22px}.lb-close{z-index:2;top:14px!important;right:14px!important;padding:10px 15px!important}
.auth-card{background:linear-gradient(145deg,rgba(18,29,46,.72),rgba(7,13,23,.58));box-shadow:inset 0 1px rgba(255,255,255,.07),0 25px 70px rgba(0,0,0,.2)}
body.light .auth-card{background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(236,245,255,.65))}
.auth-card input:focus{border-bottom-color:var(--blue);box-shadow:0 8px 24px rgba(77,156,255,.08)}
@media(min-width:801px){.gallery-feed{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.gallery-post:nth-child(1){grid-column:1/-1}.gallery-post-media{aspect-ratio:4/3}.gallery-post:nth-child(1) .gallery-post-media{aspect-ratio:16/8}}
@media(max-width:800px){.gallery-feed{margin-top:32px;gap:12px}.gallery-post{border-radius:20px}.gallery-post-head{padding:15px 15px 10px}.gallery-post-text{padding:0 15px 12px}.gallery-post-tools{padding:8px}.gallery-comment-form{padding-bottom:12px}.nav-card{width:calc(100% - 18px);right:9px;border-radius:24px}.nav-link{min-height:50px}}
@media(prefers-reduced-motion:reduce){.gallery-post{animation:none}.gallery-post-media{transition:none}}
.auth-actions button,.auth-card button{min-height:44px;cursor:pointer;user-select:none}.auth-actions button:focus-visible,.theme-toggle:focus-visible,.menu:focus-visible{outline:2px solid var(--blue);outline-offset:3px}.primary-btn{background:linear-gradient(135deg,rgba(77,156,255,.22),rgba(124,140,255,.12));border-color:rgba(77,156,255,.3)}

/* V9 — iPhone / Discord inspired polish */
:root{--blue:#5aa9ff;--blue2:#4c7dff;--blue3:#75dcff;--focus-scale:1;--focus:1}
body{overflow-x:hidden;isolation:isolate;background:radial-gradient(800px 500px at 78% 2%,rgba(55,145,255,.20),transparent 62%),radial-gradient(700px 500px at 8% 36%,rgba(41,94,255,.10),transparent 66%),linear-gradient(180deg,#050b14 0%,#07111e 45%,#040811 100%);}
body.light{background:radial-gradient(800px 500px at 78% 2%,rgba(63,139,255,.20),transparent 62%),radial-gradient(700px 500px at 8% 36%,rgba(99,154,255,.12),transparent 66%),linear-gradient(180deg,#f7fbff 0%,#edf5ff 48%,#e5effd 100%)}
body:before,body:after{content:"";position:fixed;left:0;right:0;height:15vh;z-index:90;pointer-events:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:.72}
body:before{top:0;background:linear-gradient(180deg,rgba(4,10,18,.52),transparent);mask-image:linear-gradient(#000,transparent);-webkit-mask-image:linear-gradient(#000,transparent)}
body:after{bottom:0;background:linear-gradient(0deg,rgba(4,10,18,.56),transparent);mask-image:linear-gradient(transparent,#000);-webkit-mask-image:linear-gradient(transparent,#000)}
body.light:before{background:linear-gradient(180deg,rgba(240,248,255,.72),transparent)}
body.light:after{background:linear-gradient(0deg,rgba(230,240,252,.78),transparent)}
.section{position:relative;transform:translateZ(0) scale(var(--focus-scale,1));transform-origin:center center;transition:transform .12s linear;will-change:transform}
.section:after{content:"";position:absolute;inset:8% 0;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(82,164,255,calc(var(--focus,0)*.045)),transparent 54%);opacity:.8}
.glass-panel,.glass-btn,.nav-card,.social,.tool,.thought,.project,.gallery-post,.contact-social-card,.profile-box,.profile-page,.login-hero,.profile-preview{border-color:rgba(104,173,255,.16);box-shadow:inset 0 1px rgba(255,255,255,.08),0 22px 70px rgba(0,0,0,.18),0 0 0 1px rgba(90,169,255,.025);}
.glass-panel,.tool,.thought,.project,.profile-box,.profile-page,.login-hero,.profile-preview{background:linear-gradient(145deg,rgba(17,31,52,.72),rgba(6,12,22,.58));backdrop-filter:blur(20px) saturate(145%);-webkit-backdrop-filter:blur(20px) saturate(145%)}
body.light .glass-panel,body.light .tool,body.light .thought,body.light .project,body.light .profile-box,body.light .profile-page,body.light .login-hero,body.light .profile-preview{background:linear-gradient(145deg,rgba(255,255,255,.80),rgba(233,243,255,.68));box-shadow:inset 0 1px rgba(255,255,255,.92),0 22px 70px rgba(43,91,150,.13)}
.primary-btn,.secondary-btn,.danger-btn{cursor:pointer;transition:transform .28s var(--ease),box-shadow .28s ease,background .28s ease;border-radius:14px!important}
.primary-btn:hover,.secondary-btn:hover,.danger-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(77,156,255,.14)}
.primary-btn{background:linear-gradient(135deg,rgba(88,168,255,.30),rgba(87,111,255,.18));border:1px solid rgba(98,176,255,.30)}
.secondary-btn{background:rgba(255,255,255,.035);border:1px solid var(--line)}
.danger-btn{background:rgba(255,80,100,.08);border:1px solid rgba(255,100,120,.2);color:#ff9eac}
.contact-social-card{max-width:980px;margin:30px auto 0;padding:clamp(25px,5vw,55px);border-radius:30px}
.contact-socials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:28px}.contact-socials .social{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-radius:16px}.contact-socials .social span{color:var(--blue)}
.small-display{font-size:clamp(44px,7vw,86px)!important}
.login-hero{position:relative;max-width:720px;margin:40px auto;padding:clamp(30px,6vw,70px);border-radius:34px;overflow:hidden}.login-orb{position:absolute;width:300px;height:300px;border-radius:50%;right:-110px;top:-130px;background:radial-gradient(circle,rgba(80,170,255,.38),rgba(92,92,255,.10) 45%,transparent 70%);filter:blur(5px);pointer-events:none}.login-actions{display:flex;gap:12px;margin-top:30px;position:relative}.login-actions button{flex:1;min-height:52px}.profile-preview{max-width:850px;margin:35px auto;border-radius:32px;overflow:hidden}.profile-cover,.profile-banner{height:150px;background:radial-gradient(circle at 70% 30%,rgba(103,211,255,.35),transparent 30%),linear-gradient(135deg,rgba(41,94,255,.42),rgba(92,102,255,.18) 50%,rgba(5,12,22,.2));position:relative}.profile-main{display:flex;gap:24px;align-items:center;padding:0 28px 25px;margin-top:-45px;position:relative}.profile-avatar{width:105px;height:105px;object-fit:cover;border-radius:28px;border:3px solid rgba(255,255,255,.72);background:#07111e;box-shadow:0 18px 40px rgba(0,0,0,.25)}.profile-copy{min-width:0}.profile-actions{display:flex;gap:10px;padding:0 28px 28px}.profile-actions>*{flex:1;text-align:center;padding:13px 16px}.profile-page{max-width:1050px;margin:35px auto;border-radius:32px;overflow:hidden}.profile-head{display:flex;gap:28px;align-items:end;padding:0 32px 35px;margin-top:-50px;position:relative}.profile-avatar-wrap{display:flex;flex-direction:column;gap:8px;align-items:center}.avatar-edit{font-size:9px;letter-spacing:.12em;color:var(--blue);font-weight:900;cursor:pointer}.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0 18px 18px}.profile-box{padding:22px;border-radius:22px}.box-title{font:900 10px 'Manrope';letter-spacing:.16em;color:var(--dim);margin-bottom:18px}.profile-box label{display:grid;gap:8px;font-size:10px;color:var(--dim);font-weight:800;letter-spacing:.08em}.profile-box input{width:100%;margin-bottom:12px}.mini-posts,.message-list{display:grid;gap:9px;max-height:250px;overflow:auto}.mini-posts article,.private-message{padding:12px;border:1px solid var(--soft);border-radius:14px;background:rgba(255,255,255,.025)}.mini-posts article b{display:block;font-size:12px;line-height:1.5}.mini-posts article small,.private-message small{display:block;color:var(--dim);font-size:9px;margin-top:5px}.empty-message{font-size:11px;color:var(--dim);line-height:1.6}.message-compose{display:flex;gap:8px;margin-top:12px}.message-compose input{margin:0}.message-compose button{white-space:nowrap}.account-box{display:grid;gap:10px;align-content:start}.account-box button{min-height:44px}
.tool{border-radius:24px;transition:transform .35s var(--ease),border-color .35s ease,box-shadow .35s ease}.tool:hover{transform:translateY(-4px);border-color:rgba(90,169,255,.28);box-shadow:0 28px 70px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.08)}.tool-actions button,.tool-actions label,.tool-actions select{min-height:42px;border-radius:12px;cursor:pointer}.tool-actions button{background:linear-gradient(135deg,rgba(90,169,255,.18),rgba(90,105,255,.08));border:1px solid rgba(90,169,255,.2);color:var(--text);padding:0 14px}.drop{border:1px dashed rgba(90,169,255,.28)!important;background:rgba(90,169,255,.035)!important;transition:.25s ease}.drop:hover,.drop.drag{background:rgba(90,169,255,.09)!important;border-color:rgba(90,169,255,.48)!important}
@media(max-width:800px){.contact-socials{grid-template-columns:1fr}.profile-grid{grid-template-columns:1fr;padding:0 12px 12px}.profile-head{padding:0 18px 25px;gap:15px}.profile-main{padding:0 18px 20px}.profile-actions{padding:0 18px 20px}.profile-cover{height:120px}.profile-avatar{width:88px;height:88px;border-radius:23px}.login-hero{border-radius:25px}.login-actions{flex-direction:column}.message-compose{flex-direction:column}.message-compose button{min-height:44px}.section{transition:none}}
@media(max-width:480px){.profile-head{align-items:center;flex-direction:column;text-align:center;margin-top:-38px}.profile-main{align-items:flex-end}.profile-main .profile-copy{padding-bottom:3px}.profile-preview .profile-main{align-items:center}.profile-preview .profile-copy{text-align:left}.profile-actions{flex-direction:column}.contact-social-card{border-radius:24px}.contact-socials .social{padding:14px}.body:has(+*){max-width:100%}}
@media(prefers-reduced-motion:reduce){body:before,body:after{backdrop-filter:none;-webkit-backdrop-filter:none}.section{transform:none!important}}
/* Browser-level deterrents; OS screenshots cannot be disabled by a website. */
html,body{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}input,textarea,select{user-select:text;-webkit-user-select:text}.post-image,.gallery-post-media{user-select:none;-webkit-user-drag:none}

/* V10 — minimal, fast tools UI */
.tools-hero{padding-bottom:42px}.tools-intro{max-width:760px}.tool-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}.tool-chips span{font:600 10px/1 'DM Sans',sans-serif;letter-spacing:.16em;padding:9px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(90,169,255,.05);color:var(--muted)}
.tools-section{padding-top:70px}.tools-grid-minimal{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.tool-pro{position:relative;min-height:0;padding:26px;border:1px solid var(--line);box-shadow:none!important;transition:transform .25s ease,border-color .25s ease,background .25s ease}.tool-pro:hover{transform:translateY(-3px);border-color:rgba(90,169,255,.35)}.tool-index{position:absolute;right:20px;top:20px;font:700 10px/1 'DM Sans',sans-serif;letter-spacing:.16em;color:var(--dim)}.tool-pro h3{margin:0 45px 9px 0;font-size:15px;letter-spacing:.08em}.tool-pro p{margin:0 0 18px;color:var(--muted);font-size:13px;line-height:1.6;max-width:580px}.drop{min-height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;border-radius:16px!important}.drop strong{font-size:12px;letter-spacing:.04em}.drop span{font-size:11px;color:var(--dim)}.drop.drag{transform:scale(1.01)}.tool-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}.tool-actions button,.tool-actions label,.tool-actions select{font-size:11px;letter-spacing:.04em}.tool-file{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;padding:0 13px;border:1px solid var(--line);background:var(--soft);color:var(--text)}.tool-file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.tool-actions select{padding:0 10px;border:1px solid var(--line);background:var(--glass);color:var(--text);outline:none}.tool-actions button{border:1px solid rgba(90,169,255,.25);background:linear-gradient(135deg,rgba(90,169,255,.16),rgba(90,105,255,.07));transition:transform .2s ease,background .2s ease}.tool-actions button:hover{transform:translateY(-1px);background:linear-gradient(135deg,rgba(90,169,255,.24),rgba(90,105,255,.12))}.tool-textarea{display:block;width:100%;min-height:142px;resize:vertical;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:14px;color:var(--text);outline:0;font:400 13px/1.6 'DM Sans',sans-serif;transition:border-color .2s ease,box-shadow .2s ease}.tool-textarea.compact{min-height:112px}.tool-textarea:focus{border-color:rgba(90,169,255,.45);box-shadow:0 0 0 3px rgba(90,169,255,.07)}.tool-output,.tool-status{white-space:pre-wrap;word-break:break-word;max-height:220px;overflow:auto;margin-top:12px;padding:12px 13px;border-radius:12px;background:var(--soft);border:1px solid transparent;color:var(--muted);font-size:12px;line-height:1.55;min-height:0}.tool-status:empty{display:none}.tool-output.good,.tool-status.good{color:var(--text);border-color:rgba(90,169,255,.2)}.tool-arrow{color:var(--dim);font-size:13px}.tools-drawing{padding-top:100px}.board-wrap{margin-top:28px;padding:12px;border:1px solid var(--line);border-radius:22px;background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.board-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 4px 12px}.board-tools button{min-height:38px;padding:0 13px;border:1px solid var(--line);border-radius:11px;background:var(--soft);color:var(--text);cursor:pointer}.board-tools input[type=color]{width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:transparent;padding:3px}.board-tools input[type=range]{width:130px;accent-color:#5aa9ff}.board{display:block;width:100%;height:min(58vh,560px);min-height:300px;border-radius:16px;background:rgba(255,255,255,.025);border:1px solid var(--line);touch-action:none;cursor:crosshair}
body.light .tool-pro{background:rgba(255,255,255,.64)}body.light .tool-textarea{background:rgba(255,255,255,.45)}body.light .board{background:rgba(255,255,255,.55)}
@media(max-width:760px){.tools-grid-minimal{grid-template-columns:1fr;gap:14px}.tool-pro{padding:20px;border-radius:20px}.tool-actions{gap:7px}.tool-actions button,.tool-actions label,.tool-actions select{min-height:40px}.tools-drawing{padding-top:70px}.board{height:54vh;min-height:280px}.tool-chips{gap:6px}.tool-chips span{font-size:9px}.tools-section{padding-top:45px}}
@media(prefers-reduced-motion:reduce){.tool-pro,.tool-actions button{transition:none}}

/* V11 — silky interaction layer: motion without the sticky GPU feel */
.tools-hero,.tools-section,.tools-drawing{contain:layout paint;}
.tools-hero{isolation:isolate;}
.tools-hero:before{content:"";position:absolute;width:38vw;height:38vw;max-width:520px;max-height:520px;right:-12vw;top:4%;border-radius:50%;background:radial-gradient(circle,rgba(74,160,255,.20),rgba(91,103,255,.07) 38%,transparent 70%);filter:blur(22px);opacity:.7;pointer-events:none;z-index:-1;animation:orbFloat 8s ease-in-out infinite alternate;transform:translateZ(0)}
.tools-section:before{content:"";position:absolute;left:-18vw;top:12%;width:42vw;height:42vw;border-radius:50%;background:radial-gradient(circle,rgba(70,145,255,.11),transparent 68%);filter:blur(28px);pointer-events:none;z-index:-1;animation:orbFloat2 10s ease-in-out infinite alternate;transform:translateZ(0)}
@keyframes orbFloat{from{transform:translate3d(0,0,0) scale(1);opacity:.55}to{transform:translate3d(-16px,18px,0) scale(1.06);opacity:.82}}
@keyframes orbFloat2{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(20px,-14px,0) scale(1.05)}}

/* Avoid costly blur on every scrolling frame; tools still look glassy through layered gradients. */
.tools-section .tool-pro,.board-wrap{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:linear-gradient(145deg,rgba(17,31,52,.88),rgba(6,12,22,.78));}
body.light .tools-section .tool-pro,body.light .board-wrap{background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(231,242,255,.82));}
.tool-pro{overflow:hidden;isolation:isolate;will-change:transform;transition:transform .42s var(--ease),border-color .42s ease,box-shadow .42s ease,background .42s ease;animation:toolRise .7s var(--ease) both;}
.tool-pro:nth-child(2){animation-delay:.06s}.tool-pro:nth-child(3){animation-delay:.12s}.tool-pro:nth-child(4){animation-delay:.18s}.tool-pro:nth-child(5){animation-delay:.24s}.tool-pro:nth-child(6){animation-delay:.30s}
@keyframes toolRise{from{opacity:0;transform:translate3d(0,20px,0) scale(.985)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
.tool-pro:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.055) 45%,transparent 58%);transform:translateX(-125%);transition:transform .9s var(--ease);pointer-events:none;z-index:-1}
.tool-pro:hover:before{transform:translateX(125%)}
.tool-pro:hover{transform:translate3d(0,-5px,0) scale(1.008);border-color:rgba(90,169,255,.42);box-shadow:0 22px 55px rgba(0,0,0,.18),0 0 28px rgba(70,150,255,.07),inset 0 1px rgba(255,255,255,.09)}
.tool-pro:active{transform:translate3d(0,-1px,0) scale(.992)}
.tool-index{transition:color .35s ease,transform .35s var(--ease)}.tool-pro:hover .tool-index{color:var(--blue);transform:translateY(-2px)}
.tool-pro h3{transition:letter-spacing .35s var(--ease),color .35s ease}.tool-pro:hover h3{letter-spacing:.11em;color:var(--blue3)}
.drop{position:relative;overflow:hidden;transition:transform .38s var(--ease),border-color .38s ease,background .38s ease,box-shadow .38s ease!important}
.drop:after{content:"";position:absolute;inset:-50%;background:radial-gradient(circle at 50% 50%,rgba(90,169,255,.16),transparent 38%);opacity:0;transition:opacity .4s ease;pointer-events:none}
.drop:hover,.drop.drag{transform:translate3d(0,-2px,0) scale(1.012)!important;box-shadow:0 12px 28px rgba(60,140,255,.08)}.drop:hover:after,.drop.drag:after{opacity:1}
.tool-actions button,.tool-actions label,.tool-actions select,.board-tools button{position:relative;overflow:hidden;transition:transform .32s var(--ease),box-shadow .32s ease,border-color .32s ease,background .32s ease,color .32s ease}
.tool-actions button:before,.tool-actions label:before,.board-tools button:before{content:"";position:absolute;left:-80%;top:-20%;width:45%;height:140%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-18deg);transition:left .65s var(--ease);pointer-events:none}.tool-actions button:hover:before,.tool-actions label:hover:before,.board-tools button:hover:before{left:135%}
.tool-actions button:hover,.tool-actions label:hover,.tool-actions select:hover,.board-tools button:hover{transform:translateY(-2px);border-color:rgba(90,169,255,.42);box-shadow:0 9px 24px rgba(50,130,255,.10)}
.tool-actions button:active,.tool-actions label:active,.board-tools button:active{transform:scale(.96)}
.tool-textarea,.tool-output,.tool-status{transition:border-color .35s ease,box-shadow .35s ease,background .35s ease,transform .35s var(--ease)}
.tool-textarea:hover,.tool-output:hover,.tool-status.good:hover{border-color:rgba(90,169,255,.25);box-shadow:0 8px 25px rgba(50,130,255,.06)}
.tool-textarea:focus{transform:translateY(-1px);box-shadow:0 0 0 3px rgba(90,169,255,.08),0 14px 32px rgba(50,130,255,.08)!important}
.tool-chips span{transition:transform .35s var(--ease),border-color .35s ease,background .35s ease,box-shadow .35s ease}.tool-chips span:hover{transform:translateY(-2px);border-color:rgba(90,169,255,.36);background:rgba(90,169,255,.09);box-shadow:0 8px 22px rgba(50,130,255,.08)}
.board-wrap{box-shadow:0 20px 60px rgba(0,0,0,.12),inset 0 1px rgba(255,255,255,.08);transition:transform .5s var(--ease),box-shadow .5s ease,border-color .5s ease}.board-wrap:hover{transform:translateY(-3px);box-shadow:0 28px 70px rgba(0,0,0,.16),0 0 30px rgba(70,150,255,.07),inset 0 1px rgba(255,255,255,.1);border-color:rgba(90,169,255,.28)}
.board{transition:box-shadow .35s ease,border-color .35s ease,background .35s ease}.board:focus{outline:none;border-color:rgba(90,169,255,.45);box-shadow:0 0 0 3px rgba(90,169,255,.07)}
.tool-status.good{animation:statusPop .45s var(--ease)}
@keyframes statusPop{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:none}}
.site-flash{animation:flashPulse 3.8s ease-in-out infinite}@keyframes flashPulse{0%,70%,100%{opacity:.28;transform:scaleX(.65)}75%{opacity:1;transform:scaleX(1.2)}80%{opacity:.35;transform:scaleX(.8)}}

/* Smooth, cheap section focus: only a tiny transform; no per-frame blur/filter work. */
.tools-hero,.tools-section,.tools-drawing{transition:transform .38s var(--ease),opacity .38s ease}
@media(max-width:760px){body:before,body:after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;opacity:.32;height:9vh}.tools-hero:before,.tools-section:before{filter:blur(16px);opacity:.55}.tool-pro:hover{transform:translate3d(0,-2px,0) scale(1.004)}.board-wrap:hover{transform:none}.tool-pro{animation-duration:.55s}}
@media(prefers-reduced-motion:reduce){.tools-hero:before,.tools-section:before,.site-flash,.tool-pro{animation:none!important}.tool-pro,.drop,.board-wrap{transition:none!important}.tool-pro:hover{transform:none!important}}
@keyframes canvasClear{0%{box-shadow:0 0 0 0 rgba(90,169,255,0)}45%{box-shadow:0 0 0 5px rgba(90,169,255,.10)}100%{box-shadow:0 0 0 0 rgba(90,169,255,0)}}
.board.just-cleared{animation:canvasClear .5s var(--ease)}

/* V12 premium interaction layer */
.hero-img{filter:brightness(.72) contrast(1.06) saturate(.98);transition:filter .8s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.hero-vignette{background:radial-gradient(circle at 74% 20%,rgba(77,169,255,.28),transparent 30%),linear-gradient(180deg,rgba(2,5,10,.02),rgba(2,5,10,.12) 45%,rgba(2,5,10,.68) 100%)}
.hero-3d{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:.8;transition:opacity .5s ease}
.fx-off~* .hero-3d,.fx-off .hero-3d{opacity:0}
.glass-panel,.tool-pro,.thought,.module,.project,.stat{transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s ease,box-shadow .45s ease,background .45s ease}
.glass-panel:hover,.thought:hover,.module:hover{transform:translateY(-4px);border-color:rgba(98,169,255,.28);box-shadow:0 24px 70px rgba(24,113,255,.11),inset 0 1px rgba(255,255,255,.08)}
.post-copy.clamp-text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.post-copy.clamp-text.expanded{display:block;overflow:visible}
.see-more{border:0;background:transparent;color:#6db7ff;font-size:11px;font-weight:800;padding:3px 0;cursor:pointer;transition:transform .25s ease,color .25s ease}
.see-more:hover{transform:translateX(3px);color:#9dceff}
.post-delete,.comment button{margin-left:auto;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);width:30px;height:30px;border-radius:10px;transition:.25s ease}
.post-delete:hover,.comment button:hover{color:#ff7890;border-color:rgba(255,90,120,.35);transform:scale(1.06)}
.comment{display:flex;align-items:center;gap:8px}
.comment>div{min-width:0;flex:1}
.social-dock a{position:relative;overflow:hidden}.social-dock a:after{content:"";position:absolute;inset:-50%;background:radial-gradient(circle,rgba(100,180,255,.24),transparent 55%);transform:scale(0);transition:transform .4s ease}.social-dock a:hover:after{transform:scale(1)}
.about-gate,.about-private-card{position:relative;overflow:hidden;margin-top:55px;padding:30px}.about-gate:before,.about-private-card:before{content:"";position:absolute;width:240px;height:240px;right:-100px;top:-120px;background:radial-gradient(circle,rgba(80,170,255,.24),transparent 70%);filter:blur(18px);pointer-events:none}
@media(max-width:800px){.glass-panel:hover,.thought:hover,.module:hover{transform:none;box-shadow:var(--shadow)}.hero-3d{opacity:.55}.post-copy.clamp-text{-webkit-line-clamp:3}}
/* V13 community room */
.community-room{padding-top:55px}.community-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:22px;max-width:1250px;margin:auto}.room-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}.section-title{font:800 30px/1 'Manrope';margin:8px 0}.live-dot,.chat-live{font:800 8px 'Manrope';letter-spacing:.12em;color:#7fc2ff}.live-dot:before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#61b4ff;box-shadow:0 0 14px #61b4ff;margin-right:6px}.community-side{display:grid;gap:16px;align-self:start;position:sticky;top:100px}.chat-panel,.chat-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--soft);padding-bottom:13px}.chat-head h3,.voice-panel h3{margin:6px 0 0;font:800 20px 'Manrope'}.chat-messages{height:430px;overflow:auto;padding:12px 3px;display:grid;align-content:start;gap:12px;scrollbar-width:thin}.chat-message{display:flex;gap:9px;align-items:flex-start;animation:chatIn .35s var(--ease) both}.avatar.mini{width:30px;height:30px;border-radius:10px;flex:none}.chat-message b{font-size:11px}.chat-message p{margin:3px 0;color:var(--muted);font-size:12px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}.chat-message small{color:var(--dim);font-size:9px}.chat-form{display:flex;gap:7px;border-top:1px solid var(--soft);padding-top:12px}.chat-form input{min-width:0;flex:1;border:1px solid var(--line);background:rgba(255,255,255,.025);border-radius:999px;padding:10px 13px;outline:none}.chat-form button{width:40px;border:1px solid rgba(98,169,255,.25);border-radius:50%;background:rgba(77,156,255,.1)}.voice-panel p{color:var(--muted);font-size:12px;line-height:1.55}.voice-actions{display:flex;gap:8px}.voice-actions button{flex:1}.post-actions button.active{color:#72b8ff;background:rgba(77,156,255,.13);box-shadow:0 0 20px rgba(77,156,255,.08)}.post-image{aspect-ratio:4/3;max-height:none;object-fit:cover;background:linear-gradient(135deg,#07101d,#0d315c)}.composer textarea:focus,.chat-form input:focus,.comment-form input:focus{border-color:rgba(98,169,255,.45);box-shadow:0 0 0 3px rgba(98,169,255,.06),0 0 28px rgba(77,156,255,.08)}@keyframes chatIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(max-width:980px){.community-layout{grid-template-columns:1fr}.community-side{position:static;grid-template-columns:1fr 1fr}.chat-messages{height:300px}}@media(max-width:650px){.community-side{grid-template-columns:1fr}.chat-messages{height:330px}.community-room{padding-top:35px}.section-title{font-size:24px}}
/* V14 community cleanup: separate text chat, no voice UI */
.community-side{display:block;position:sticky;top:100px;align-self:start}
.chat-panel{display:block;padding:18px}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:0 0 13px;margin-bottom:0;border-bottom:1px solid var(--soft)}
.chat-head h3{margin:6px 0 0;font:800 20px 'Manrope'}
.post-time{font-variant-numeric:tabular-nums}
.post-visible-time{margin-left:auto;align-self:center;color:var(--dim);font:800 9px 'Manrope';letter-spacing:.03em}
.comment small{display:block;margin-top:4px;color:var(--dim);font-size:9px}
@media(max-width:980px){.community-side{position:static}}
body::before {
  content: "";
  position: fixed;
  inset: -5%;
  z-index: -2;

  background:
    linear-gradient(
      rgba(2, 8, 20, .52),
      rgba(2, 8, 20, .74)
    ),
    url("assets/images/background.jpg") center/cover no-repeat;

  animation: backgroundFloat 20s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes backgroundFloat {
  0% {
    transform: scale(1);
    background-position: 48% 48%;
  }

  100% {
    transform: scale(1.08);
    background-position: 52% 52%;
  }
}
/* ========================================
   MULTI PHOTO GALLERY
======================================== */

.gallery-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #05070d;
  touch-action: pan-y;
}

.gallery-main-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  cursor: zoom-in;
  transition:
    opacity .28s ease,
    transform .45s cubic-bezier(.2,.8,.2,1);
}

.gallery-main-image.slide-next {
  opacity: .2;
  transform: translateX(-18px) scale(.985);
}

.gallery-main-image.slide-prev {
  opacity: .2;
  transform: translateX(18px) scale(.985);
}

.gallery-media-prev,
.gallery-media-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 42px;
  height: 42px;

  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;

  background: rgba(5,10,20,.58);
  backdrop-filter: blur(12px);

  color: white;
  font-size: 30px;
  line-height: 1;

  display: grid;
  place-items: center;

  cursor: pointer;

  opacity: 0;
  transition:
    opacity .25s ease,
    transform .25s ease,
    background .25s ease;
}

.gallery-media-prev {
  left: 14px;
}

.gallery-media-next {
  right: 14px;
}

.gallery-media:hover
.gallery-media-prev,
.gallery-media:hover
.gallery-media-next {
  opacity: 1;
}

.gallery-media-prev:hover,
.gallery-media-next:hover {
  background: rgba(30,120,255,.75);
}

.gallery-photo-count {
  position: absolute;
  top: 14px;
  right: 14px;

  padding: 7px 11px;

  border-radius: 999px;

  background: rgba(0,0,0,.55);
  backdrop-filter: blur(12px);

  color: white;
  font-size: 12px;
  font-weight: 600;

  border: 1px solid rgba(255,255,255,.12);
}

.gallery-dots {
  position: absolute;
  left: 50%;
  bottom: 14px;

  transform: translateX(-50%);

  display: flex;
  gap: 5px;

  padding: 6px 9px;

  border-radius: 999px;

  background: rgba(0,0,0,.4);
  backdrop-filter: blur(10px);
}

.gallery-dot {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: rgba(255,255,255,.45);

  transition:
    width .25s ease,
    background .25s ease;
}

.gallery-dot.active {
  width: 15px;
  background: #5ba7ff;
}


/* FULLSCREEN VIEWER */

.gallery-lightbox {
  position: fixed;
  inset: 0;

  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 30px;

  background: rgba(0,4,12,.82);

  backdrop-filter: blur(22px);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity .35s ease,
    visibility .35s ease;
}

.gallery-lightbox.open {
  opacity: 1;
  visibility: visible;
}

.gallery-viewer {
  position: relative;

  max-width: min(1100px, 90vw);
  max-height: 90vh;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 12px;
}

.gallery-viewer img {
  max-width: 90vw;
  max-height: 78vh;

  object-fit: contain;

  border-radius: 18px;

  box-shadow:
    0 30px 100px rgba(0,0,0,.55),
    0 0 60px rgba(40,120,255,.12);

  animation: galleryImageIn .35s ease;
}

@keyframes galleryImageIn {
  from {
    opacity: 0;
    transform: scale(.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.gallery-close {
  position: fixed;
  top: 24px;
  right: 24px;

  width: 44px;
  height: 44px;

  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);

  background: rgba(10,15,25,.65);
  backdrop-filter: blur(12px);

  color: white;
  font-size: 28px;

  cursor: pointer;

  z-index: 5;

  transition:
    transform .25s ease,
    background .25s ease;
}

.gallery-close:hover {
  transform: rotate(90deg) scale(1.08);
  background: rgba(30,120,255,.7);
}

.gallery-arrow {
  position: fixed;
  top: 50%;

  width: 54px;
  height: 54px;

  border-radius: 50%;

  border: 1px solid rgba(255,255,255,.15);

  background: rgba(10,15,25,.6);
  backdrop-filter: blur(14px);

  color: white;

  font-size: 40px;

  cursor: pointer;

  transform: translateY(-50%);

  transition:
    transform .25s ease,
    background .25s ease;
}

.gallery-arrow:hover {
  background: rgba(30,120,255,.7);
  transform: translateY(-50%) scale(1.08);
}

.gallery-prev {
  left: 25px;
}

.gallery-next {
  right: 25px;
}

.gallery-counter {
  color: rgba(255,255,255,.8);
  font-size: 13px;
}

.gallery-viewer-caption {
  max-width: 700px;

  text-align: center;

  color: rgba(255,255,255,.9);

  font-size: 14px;
}

.gallery-view {
  border: 0;
  background: transparent;
  color: #68adff;

  cursor: pointer;

  font-size: 12px;
  font-weight: 700;

  transition:
    transform .2s ease,
    color .2s ease;
}

.gallery-view:hover {
  color: white;
  transform: translateX(4px);
}

.gallery-viewer-open {
  overflow: hidden;
}


/* MOBILE */

@media (max-width: 700px) {

  .gallery-media {
    aspect-ratio: 1 / 1;
  }

  .gallery-media-prev,
  .gallery-media-next {
    opacity: .85;
    width: 36px;
    height: 36px;
    font-size: 25px;
  }

  .gallery-lightbox {
    padding: 15px;
  }

  .gallery-viewer img {
    max-width: 96vw;
    max-height: 78vh;
    border-radius: 12px;
  }

  .gallery-arrow {
    width: 40px;
    height: 40px;
    font-size: 28px;
  }

  .gallery-prev {
    left: 8px;
  }

  .gallery-next {
    right: 8px;
  }

  .gallery-close {
    top: 12px;
    right: 12px;
  }
}


/* =========================================================
   YJ FINAL PERFORMANCE + FACEBOOK WEBVIEW FIX
========================================================= */
html{scroll-behavior:auto!important;overscroll-behavior-x:none;overflow-x:hidden}
body{overflow-x:hidden;-webkit-overflow-scrolling:touch}

/* Avoid expensive per-scroll transforms from older versions. */
.section{will-change:auto!important;}

/* Facebook / Instagram / Messenger in-app browser mode. */
html.in-app-browser .header.scrolled,
html.in-app-browser .nav,
html.in-app-browser .nav-card,
html.in-app-browser .glass-btn,
html.in-app-browser .social-dock,
html.in-app-browser .glass-panel,
html.in-app-browser .tool,
html.in-app-browser .tool-pro,
html.in-app-browser .thought,
html.in-app-browser .project,
html.in-app-browser .gallery-post,
html.in-app-browser .gallery-lightbox,
html.in-app-browser .lightbox{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

html.in-app-browser .hero-img{animation:none!important;will-change:auto!important}
html.in-app-browser .hero-glow,
html.in-app-browser .tools-hero:before,
html.in-app-browser .tools-section:before{filter:none!important;animation:none!important}
html.in-app-browser .section{transform:none!important;transition:none!important}
html.in-app-browser .reveal{transition:opacity .28s ease,transform .28s ease}

/* Cheap glass fallback for WebViews without reliable backdrop-filter. */
@supports not (backdrop-filter:blur(1px)){
  .header.scrolled,.nav-card,.glass-btn,.social-dock,.glass-panel,.tool,.tool-pro,.thought,.project,.gallery-post,.gallery-lightbox,.lightbox{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}

/* Touch-friendly interaction without forcing layout work. */
button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

@media(max-width:700px){
  body:before,body:after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .hero-img{will-change:auto!important}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}