/*
Theme Name: Devfolio Studio
Author: Kamran Rasool
Description: Clean, fast, fully responsive portfolio theme with light and dark mode, a projects section and a built-in maintenance mode. Edit details in Appearance > Customize > Portfolio details and add work under Projects.
Version: 6.2.0
Requires at least: 5.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: devfolio
*/
@font-face{font-family:"Sora";font-weight:500;font-style:normal;font-display:swap;src:url("assets/fonts/sora-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Sora";font-weight:600;font-style:normal;font-display:swap;src:url("assets/fonts/sora-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Sora";font-weight:700;font-style:normal;font-display:swap;src:url("assets/fonts/sora-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Sora";font-weight:800;font-style:normal;font-display:swap;src:url("assets/fonts/sora-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-weight:400;font-style:normal;font-display:swap;src:url("assets/fonts/dm-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-weight:500;font-style:normal;font-display:swap;src:url("assets/fonts/dm-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-weight:700;font-style:normal;font-display:swap;src:url("assets/fonts/dm-sans-latin-700-normal.woff2") format("woff2")}

:root{--bg:#F4F6FB;--sf:#fff;--sf2:#EAEEF8;--ink:#0B1220;--mut:#566074;--line:rgba(11,18,32,.11);--ac:#3355FF;--acs:#E7ECFF;--ok:#12B886;--glass:rgba(255,255,255,.8);--w:1180px;--ab:0px}
[data-theme=dark]{--bg:#080D19;--sf:#101828;--sf2:#16203A;--ink:#EEF2FF;--mut:#9AA6BD;--line:rgba(255,255,255,.1);--ac:#8EA2FF;--acs:rgba(142,162,255,.14);--ok:#3DDC97;--glass:rgba(16,24,40,.78)}
.admin-bar{--ab:32px}@media(max-width:782px){.admin-bar{--ab:46px}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--ab) + 96px);-webkit-text-size-adjust:100%}
html.kr-lock{overflow:hidden}
body.kr-site{margin:0;background:var(--bg);color:var(--mut);font:400 16px/1.7 "DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2,h3{font-family:"Sora","DM Sans",sans-serif;color:var(--ink);line-height:1.1;letter-spacing:-.02em}
a{color:var(--ac)}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--ac);color:var(--bg)}
:focus-visible{outline:3px solid var(--ac);outline-offset:3px;border-radius:6px}
.kr-skip{position:fixed;left:12px;top:-80px;z-index:500;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:99px;font-weight:700;text-decoration:none}
.kr-skip:focus{top:calc(var(--ab) + 10px)}
.kr-wrap{max-width:var(--w);margin:0 auto;padding:0 20px}
.kr-i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kr-progress{position:fixed;top:var(--ab);left:0;width:100%;height:3px;z-index:90;transform-origin:0 50%;transform:scaleX(var(--p,0));background:var(--ac)}

/* buttons */
.kr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:99px;border:1.5px solid var(--line);background:transparent;color:var(--ink);font:600 15px/1 "DM Sans",sans-serif;text-decoration:none;cursor:pointer;transition:transform .2s,background .2s,border-color .2s,color .2s}
.kr-btn:hover{border-color:var(--ink);transform:translateY(-2px)}
.kr-btn .kr-i{width:17px;height:17px}
.kr-pri{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.kr-pri:hover{background:var(--ac);border-color:var(--ac);color:var(--bg)}
.kr-acc{background:var(--ac);border-color:var(--ac);color:#fff}
.kr-acc:hover{filter:brightness(1.08);border-color:var(--ac)}
.kr-sm{min-height:40px;padding:0 18px;font-size:14px}
.kr-ibtn{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;flex:none}
.kr-ibtn:hover{background:var(--acs)}
.kr-th .kr-i:last-child{display:none}[data-theme=dark] .kr-th .kr-i:first-child{display:none}[data-theme=dark] .kr-th .kr-i:last-child{display:block}

/* nav */
.kr-nav-wrap{position:fixed;z-index:80;top:calc(var(--ab) + 12px);left:0;right:0;padding:0 14px;pointer-events:none}
.kr-nav{pointer-events:auto;max-width:var(--w);margin:0 auto;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:99px;background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
.kr-brand{display:flex;align-items:center;gap:10px;margin-right:auto;color:var(--ink);font:700 17px "Sora",sans-serif;text-decoration:none;min-width:0}
.kr-brand .kr-bt{overflow:hidden}
.kr-mark{width:34px;height:34px;flex:none;display:block}
.kr-mark{filter:drop-shadow(0 6px 14px rgba(99,102,241,.35))}
.kr-wm{display:inline-flex;gap:.28em;align-items:baseline;line-height:1;letter-spacing:-.03em;white-space:nowrap}
.kr-wm b{font-weight:700;color:var(--ink)}
.kr-wm i{font-style:normal;font-weight:500;background:linear-gradient(90deg,var(--ac),#8B5CF6,#22D3EE);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--ac);animation:kr-shine 5s ease-in-out infinite alternate}
@keyframes kr-shine{to{background-position:100% 0}}
.kr-brand .kr-mark{transition:transform .35s}.kr-brand:hover .kr-mark{transform:rotate(-8deg) scale(1.08)}
.kr-bt{display:flex;flex-direction:column;gap:4px;min-width:0}
.kr-bt .kr-wm{font-size:17px}
.kr-bt small{font:500 11px/1 "DM Sans",sans-serif;color:var(--mut);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kr-mark-sm{width:28px;height:28px}
.kr-fb{display:inline-flex;align-items:center;gap:10px;font:700 15px "Sora",sans-serif}
.kr-mark-txt{display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,var(--ac),#8B5CF6);color:#fff;font:700 14px "Sora",sans-serif}
.kr-mark-lg{width:64px;height:64px}.kr-mark-lg.kr-mark-txt{border-radius:18px;font-size:22px}
.kr-links{display:none;gap:4px}
.kr-links a{padding:8px 14px;border-radius:99px;color:var(--ink);font-weight:500;font-size:15px;text-decoration:none}
.kr-links a:hover{background:var(--acs)}
.kr-hire{display:none}
.kr-burger{display:grid;place-content:center;gap:6px;width:40px;height:40px;border-radius:50%;border:0;background:var(--ink);cursor:pointer;flex:none}
.kr-burger i{display:block;width:18px;height:2px;border-radius:2px;background:var(--bg);transition:transform .3s}
.kr-burger.is-open i:first-child{transform:translateY(4px) rotate(45deg)}.kr-burger.is-open i:last-child{transform:translateY(-4px) rotate(-45deg)}
.kr-menu{position:fixed;inset:0;z-index:70;background:var(--bg);padding:calc(var(--ab) + 100px) 24px 32px;display:flex;flex-direction:column;justify-content:space-between;overflow-y:auto;visibility:hidden;opacity:0;transform:translateY(-12px);transition:opacity .25s,transform .25s,visibility .25s}
.kr-menu.is-open{visibility:visible;opacity:1;transform:none}
.kr-menu nav{display:flex;flex-direction:column}
.kr-menu nav a{padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink);font:600 clamp(28px,8vw,40px)/1.1 "Sora",sans-serif;text-decoration:none}
.kr-menu-foot{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-top:28px}
@media(min-width:900px){.kr-links{display:flex}.kr-burger,.kr-menu{display:none}}
@media(min-width:560px){.kr-hire{display:inline-flex}}

/* small shared bits */
.kr-chipl{display:inline-block;max-width:100%;padding:5px 12px;border-radius:99px;background:var(--acs);color:var(--ink);font-size:13px;font-weight:500;text-decoration:none;overflow-wrap:anywhere;line-height:1.4}
.kr-chipl:hover{background:var(--ac);color:var(--bg)}
.kr-soc{display:flex;flex-wrap:wrap;gap:8px}
.kr-soc a{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:38px;height:38px;border-radius:99px;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:13px;font-weight:600}
.kr-soc a:hover{background:var(--acs);border-color:var(--ac)}
.kr-soc .kr-soc-t{padding:0 14px}.kr-soc .kr-soc-t .kr-i{width:14px;height:14px}
.kr-soc a .kr-i{width:17px;height:17px}

/* hero */
.kr-hero{padding:calc(var(--ab) + 118px) 0 0}
.kr-hero-grid{display:grid;gap:36px;align-items:center}
.kr-status{display:inline-flex;align-items:center;gap:9px;margin-bottom:22px;padding:7px 16px;border-radius:99px;background:var(--sf);border:1px solid var(--line);color:var(--ink);font-size:13.5px;font-weight:500}
.kr-status i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:kr-ping 2s infinite}
@keyframes kr-ping{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.kr-h1{font-size:clamp(40px,9.4vw,88px);font-weight:700;letter-spacing:-.04em;line-height:1.02;max-width:13ch;margin-bottom:22px}
.kr-lede{max-width:56ch;font-size:clamp(16px,2.2vw,19px);margin-bottom:22px}
.kr-roles{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.kr-roles li{padding:6px 14px;border-radius:99px;border:1px solid var(--line);color:var(--ink);font-size:13.5px;font-weight:500}
.kr-cta{display:flex;flex-wrap:wrap;gap:12px}
@keyframes kr-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.kr-id{position:relative;z-index:0;padding:26px;border-radius:30px;background:var(--sf);border:1px solid var(--line)}
.kr-id::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:30px;background:var(--acs);border:1px solid var(--line);transform:rotate(3.5deg) translate(8px,10px)}
.kr-id-top{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.kr-id-name .kr-wm{font-size:25px}
.kr-id-name{font:700 22px/1.15 "Sora",sans-serif;color:var(--ink);letter-spacing:-.02em}
.kr-id-role{font-size:14px;margin-top:3px}
.kr-id-list{display:grid;gap:12px;margin-bottom:20px;padding-top:18px;border-top:1px solid var(--line)}
.kr-id-list li{display:flex;align-items:center;gap:10px;font-size:14.5px;min-width:0}
.kr-id-list .kr-i{color:var(--ac)}
.kr-id-list b{color:var(--ink);font-variant-numeric:tabular-nums}
.kr-copy{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;flex:none}
.kr-copy .kr-i{width:14px;height:14px;color:inherit}
.kr-copy:hover,.kr-copy.is-done{background:var(--ac);border-color:var(--ac);color:var(--bg)}
@media(min-width:900px){.kr-hero-grid{grid-template-columns:1.3fr .8fr;gap:56px}}

.kr-stats{display:grid;grid-template-columns:repeat(2,1fr);margin-top:56px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kr-stats div{display:flex;flex-direction:column-reverse;gap:2px;padding:22px 0 22px 16px;border-left:1px solid var(--line)}
.kr-stats div:nth-child(odd){border-left:0;padding-left:0}
.kr-stats div:nth-child(n+3){border-top:1px solid var(--line)}
.kr-stats dd{font:700 clamp(30px,6vw,46px)/1 "Sora",sans-serif;color:var(--ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kr-stats dt{font-size:14px}
@media(min-width:760px){.kr-stats{grid-template-columns:repeat(4,1fr)}.kr-stats div,.kr-stats div:nth-child(odd){padding:26px 0 26px 28px;border-left:1px solid var(--line)}.kr-stats div:first-child{border-left:0;padding-left:0}.kr-stats div:nth-child(n+3){border-top:0}}

/* marquee */
.kr-mq{overflow:hidden;padding:22px 0;color:#fff;background:linear-gradient(90deg,#0B1220,#1E3A9E,#6D3FD8,#1E3A9E,#0B1220);background-size:200% 100%;animation:kr-mbg 12s ease-in-out infinite alternate}
@keyframes kr-mbg{to{background-position:100% 0}}
.kr-mq-t{display:flex;width:max-content;animation:kr-mq 45s linear infinite}
.kr-mq:hover .kr-mq-t{animation-play-state:paused}
.kr-mq-g{display:flex;gap:36px;padding-right:36px}
.kr-mq-g span{white-space:nowrap;font:600 clamp(16px,2.4vw,22px) "Sora",sans-serif;letter-spacing:-.01em}
.kr-mq-g span::after{content:"";display:inline-block;width:6px;height:6px;margin-left:36px;border-radius:50%;background:#8EA2FF;vertical-align:middle}
@keyframes kr-mq{to{transform:translateX(-50%)}}

/* sections */
.kr-sec{padding:clamp(64px,9vw,112px) 0}
.kr-alt{background:var(--sf2)}
.kr-sh{margin-bottom:clamp(28px,5vw,48px);max-width:60ch}
.kr-sh h2{font-size:clamp(32px,6.5vw,58px);letter-spacing:-.035em}
.kr-sh p{margin-top:12px;font-size:17px}
.kr-card{padding:clamp(22px,3.4vw,32px);border-radius:24px;background:var(--sf);border:1px solid var(--line)}
.kr-card h3{font-size:20px;margin-bottom:18px}
.kr-about{display:grid;gap:20px;margin-bottom:20px}
.kr-bio{display:grid;gap:18px;align-content:start;padding:4px 0}
.kr-bio p{max-width:60ch}.kr-bio .kr-big{font:500 clamp(20px,3vw,26px)/1.45 "Sora",sans-serif;color:var(--ink);letter-spacing:-.02em}
@media(min-width:900px){.kr-about{grid-template-columns:1.1fr .9fr;gap:40px}}
.kr-tl{display:grid;gap:0;margin-left:6px;border-left:2px solid var(--line)}
.kr-tl li{position:relative;padding:0 0 24px 22px}.kr-tl li:last-child{padding-bottom:0}
.kr-tl li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--ac);border:3px solid var(--sf)}
.kr-tl time{display:block;font-size:13px;color:var(--ac);font-weight:700;margin-bottom:3px}
.kr-tl strong{display:block;color:var(--ink);font-weight:700;line-height:1.4}
.kr-tl p{margin-top:6px;font-size:14.5px;max-width:60ch}
.kr-skill-grid{display:grid;gap:18px 40px}
@media(min-width:760px){.kr-skill-grid{grid-template-columns:1fr 1fr}}
.kr-skill>div{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:14.5px;color:var(--ink);font-weight:500}
.kr-skill b{color:var(--mut);font-weight:500;font-variant-numeric:tabular-nums}
.kr-track{display:block;height:6px;border-radius:99px;background:var(--sf2);overflow:hidden}
.kr-alt .kr-track{background:var(--line)}
.kr-fill{display:block;height:100%;width:var(--w);border-radius:99px;background:var(--ac);transform-origin:0 50%}
.kr-js .kr-fill{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.kr-js .kr-skills.is-in .kr-fill{transform:scaleX(1)}

.kr-svc{display:grid;gap:16px}
@media(min-width:640px){.kr-svc{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.kr-svc{grid-template-columns:repeat(3,1fr)}}
.kr-svc-i{transition:transform .25s,border-color .25s}
.kr-svc-i:hover{transform:translateY(-4px);border-color:var(--ac)}
.kr-ico{display:grid;place-items:center;width:48px;height:48px;margin-bottom:20px;border-radius:15px;background:var(--acs);color:var(--ac)}
.kr-ico .kr-i{width:22px;height:22px}
.kr-svc-i h3{font-size:19px;margin-bottom:10px}.kr-svc-i p{font-size:15px}

.kr-steps{display:grid;gap:28px;counter-reset:s}
@media(min-width:700px){.kr-steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.kr-steps{grid-template-columns:repeat(4,1fr);gap:24px}}
.kr-steps li{position:relative;padding-top:20px;border-top:2px solid var(--line)}
.kr-steps li::before{content:"";position:absolute;left:0;top:-2px;width:100%;height:2px;background:linear-gradient(90deg,var(--ac),#8B5CF6);transform:scaleX(var(--s,1));transform-origin:0 50%}
.kr-num{display:inline-grid;place-items:center;width:34px;height:34px;margin-bottom:14px;border-radius:50%;background:var(--ink);color:var(--bg);font:700 14px "Sora",sans-serif}
.kr-steps h3{font-size:21px;margin-bottom:8px}.kr-steps p{font-size:15px}

/* projects */
.kr-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.kr-filter button{min-height:40px;padding:0 18px;border-radius:99px;border:1px solid var(--line);background:var(--sf);color:var(--ink);font:600 14px "DM Sans",sans-serif;cursor:pointer}
.kr-filter button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.kr-work{display:grid;gap:22px}
@media(min-width:680px){.kr-work{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.kr-work{grid-template-columns:repeat(3,1fr)}.kr-wide{grid-column:span 2}}
.kr-pj{display:flex;flex-direction:column;overflow:hidden;border-radius:26px;background:var(--sf);border:1px solid var(--line);transition:transform .3s,border-color .3s,box-shadow .3s}
.kr-pj:hover{transform:translateY(-6px);border-color:var(--ac);box-shadow:0 24px 48px -24px rgba(51,85,255,.35)}
.kr-pj[hidden]{display:none}
.kr-pj-img{position:relative;display:block;aspect-ratio:16/10.5;margin:10px 10px 0;border-radius:18px;border:1px solid var(--line);background:linear-gradient(135deg,var(--acs),var(--sf2));overflow:hidden}
.kr-wide .kr-pj-img{aspect-ratio:auto;flex:1;min-height:240px}
.kr-pj-img::before{content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:28px;background:var(--sf);border-bottom:1px solid var(--line)}
.kr-pj-img::after{content:"";position:absolute;z-index:3;left:13px;top:10px;width:8px;height:8px;border-radius:50%;background:#FF5F57;box-shadow:14px 0 #FEBC2E,28px 0 #28C840}
.kr-pj-img img{position:absolute;z-index:1;left:0;right:0;top:28px;width:100%;height:calc(100% - 28px);object-fit:cover;object-position:top;transition:transform .6s}
.kr-pj:hover .kr-pj-img img{transform:scale(1.05)}
.kr-ph{position:absolute;inset:28px 0 0;display:grid;place-items:center;font:700 72px "Sora",sans-serif;color:var(--ac);opacity:.55}
.kr-pj-b{display:flex;flex-direction:column;gap:12px;padding:20px 22px 24px}
.kr-pj-b h3{font-size:21px;letter-spacing:-.025em}.kr-pj-b h3 a{color:var(--ink);text-decoration:none}.kr-pj-b h3 a:hover{color:var(--ac)}
.kr-pj-b p{font-size:15px}
.kr-pj-b .kr-flow{margin:2px 0}.kr-pj-b .kr-flow span{padding:4px 11px;font-size:12px}.kr-pj-b .kr-wire{width:12px}
.kr-cat{align-self:flex-start;padding:3px 12px;border-radius:99px;background:var(--acs);font-size:12.5px;font-weight:700;color:var(--ac)}
.kr-tags{display:flex;flex-wrap:wrap;gap:6px}
.kr-tags li{padding:3px 10px;border-radius:99px;background:var(--sf2);color:var(--ink);font-size:12.5px;font-weight:500}
.kr-pj-l{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:14px;font-weight:600}
.kr-pj-l a{display:inline-flex;align-items:center;gap:6px;text-decoration:none}.kr-pj-l a:hover{text-decoration:underline}
.kr-pj-l .kr-i{width:15px;height:15px}

/* contact */
.kr-contact{display:grid;gap:36px;padding:clamp(24px,5vw,56px);border-radius:32px;background:#0B1220;color:#B5BFD3}
.kr-c-info h2{font-size:clamp(30px,5.4vw,52px);color:#F4F6FF;margin-bottom:16px;letter-spacing:-.035em}
.kr-c-info>p{max-width:42ch;margin-bottom:24px}
.kr-c-list{display:grid;gap:12px;margin-bottom:24px}
.kr-c-list li{display:flex;align-items:center;gap:12px;min-width:0;overflow-wrap:anywhere}
.kr-c-list .kr-i{color:#8EA2FF}
.kr-c-list a{color:#F4F6FF;text-decoration:none;font-weight:500}.kr-c-list a:hover{text-decoration:underline}
.kr-contact .kr-soc a{color:#F4F6FF;border-color:rgba(255,255,255,.2)}.kr-contact .kr-soc a:hover{background:rgba(255,255,255,.1);border-color:#8EA2FF}
.kr-form{display:flex;flex-direction:column;gap:8px}
.kr-form label{font-size:14px;font-weight:500;color:#F4F6FF}
.kr-form input,.kr-form textarea{width:100%;padding:14px 16px;margin-bottom:8px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#F4F6FF;font:400 16px "DM Sans",sans-serif;transition:border-color .2s,background .2s}
.kr-form textarea{resize:vertical;min-height:130px}
.kr-form input:focus,.kr-form textarea:focus{outline:0;border-color:#8EA2FF;background:rgba(255,255,255,.09)}
.kr-form .kr-btn{margin-top:6px;align-self:flex-start}
.kr-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kr-fmsg{padding:12px 16px;margin-bottom:6px;border-radius:14px;font-size:14.5px;font-weight:500}
.kr-fmsg.ok{background:rgba(61,220,151,.14);color:#7CF0BC}.kr-fmsg.bad{background:rgba(255,120,120,.14);color:#FFB4B4}
@media(min-width:900px){.kr-contact{grid-template-columns:1fr 1fr;gap:56px;align-items:start}}

.kr-notice{padding:14px 18px;border-radius:16px;background:var(--acs);color:var(--ink);font-size:15px}

/* ===== section backgrounds and ambient animation ===== */
.kr-sec,.kr-hero{position:relative;overflow:hidden;overflow:clip}
.kr-sec>.kr-wrap,.kr-hero>.kr-wrap{position:relative;z-index:1}
.kr-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.kr-bg i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.kr-bg i:nth-child(1){width:min(46vw,620px);height:min(46vw,620px);left:-8%;top:-14%;background:var(--ac);animation:kr-f1 18s ease-in-out infinite alternate}
.kr-bg i:nth-child(2){width:min(40vw,520px);height:min(40vw,520px);right:-6%;top:6%;background:#8B5CF6;animation:kr-f2 22s ease-in-out infinite alternate}
.kr-bg i:nth-child(3){width:min(34vw,440px);height:min(34vw,440px);left:38%;bottom:-20%;background:#22D3EE;opacity:.26;animation:kr-f3 26s ease-in-out infinite alternate}
[data-theme=dark] .kr-bg i{opacity:.34}
.kr-hero>.kr-bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 70% at 50% 35%,#000,transparent);mask-image:radial-gradient(70% 70% at 50% 35%,#000,transparent)}
@keyframes kr-f1{to{transform:translate(14vw,10vh) scale(1.2)}}
@keyframes kr-f2{to{transform:translate(-12vw,14vh) scale(.85)}}
@keyframes kr-f3{to{transform:translate(-16vw,-8vh) scale(1.15)}}
.kr-hero{background:linear-gradient(180deg,var(--bg),var(--bg))}
.kr-hero .kr-stats{border-color:var(--line);background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:24px;border:1px solid var(--line);padding:0 24px;margin-bottom:56px}
.kr-hero .kr-stats div:first-child{padding-left:0}
.kr-s-about{background:radial-gradient(55% 45% at 0% 0%,var(--acs),transparent 70%),radial-gradient(40% 35% at 100% 95%,rgba(139,92,246,.12),transparent 70%),var(--bg)}
.kr-alt{background:linear-gradient(180deg,var(--sf2),var(--bg))}
.kr-alt::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--line) 1.3px,transparent 1.4px);background-size:26px 26px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%);pointer-events:none}
.kr-s-proc{background:radial-gradient(50% 60% at 100% 50%,var(--acs),transparent 70%),radial-gradient(35% 40% at 0% 100%,rgba(34,211,238,.10),transparent 70%),var(--bg)}
.kr-s-contact{background:radial-gradient(60% 50% at 50% 100%,var(--acs),transparent 70%),var(--bg)}
.kr-dark{--bg:#0A1020;--sf:#111A2F;--sf2:#18233F;--ink:#EEF2FF;--mut:#A3AFC6;--line:rgba(255,255,255,.1);--ac:#8EA2FF;--acs:rgba(142,162,255,.14);--glass:rgba(17,26,47,.8);background:#0A1020;color:var(--mut)}
.kr-dark .kr-bg i{opacity:.38}
.kr-dark .kr-bg i:nth-child(3){opacity:.2}
.kr-dark .kr-bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent);mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent)}
.kr-contact{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(135deg,#0A1020,#141D3F)}
.kr-contact::before,.kr-contact::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);pointer-events:none}
.kr-contact::before{width:420px;height:420px;right:-120px;top:-140px;background:rgba(139,92,246,.5);animation:kr-f2 20s ease-in-out infinite alternate}
.kr-contact::after{width:380px;height:380px;left:-120px;bottom:-160px;background:rgba(51,85,255,.45);animation:kr-f1 24s ease-in-out infinite alternate}
.kr-foot{padding:48px 0 calc(28px + env(safe-area-inset-bottom));border-top:1px solid var(--line);font-size:14px;overflow:hidden}
.kr-big-wm{margin-bottom:28px;text-align:center;white-space:nowrap;font:700 clamp(30px,10.4vw,150px)/1 "Sora",sans-serif;letter-spacing:-.05em;background:linear-gradient(180deg,var(--ac) 0%,#8B5CF6 45%,transparent 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--ac)}
.kr-foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px}

/* single pages */
.kr-single{max-width:820px;margin:0 auto;padding:calc(var(--ab) + 130px) 20px 80px}
.kr-single h1{font-size:clamp(34px,7vw,60px);letter-spacing:-.035em;margin:10px 0 18px}
.kr-single>.kr-lede{margin-bottom:22px}
.kr-single .kr-tags{margin:18px 0}
.kr-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:20px 0}
.kr-flow span{padding:6px 14px;border-radius:99px;border:1px solid var(--line);background:var(--sf);color:var(--ink);font-size:13.5px;font-weight:500}
.kr-wire{width:20px;height:2px;background:var(--ac);border-radius:2px}
.kr-mlinks{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}
.kr-shot{width:100%;margin:28px 0;border-radius:22px;border:1px solid var(--line)}
.kr-content{font-size:17px}.kr-content>*+*{margin-top:1.1em}
.kr-content h2,.kr-content h3{margin-top:1.6em}
.kr-content ul{list-style:disc;padding-left:1.3em}.kr-content ol{list-style:decimal;padding-left:1.3em}

@media(max-width:420px){.kr-wrap{padding:0 16px}.kr-btn{padding:0 20px}.kr-id{padding:22px}.kr-nav-wrap{padding:0 10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.kr-js .kr-fill{transform:none}}

/* softer ambient glow for content sections, each laid out differently */
.kr-soft i{opacity:.2}[data-theme=dark] .kr-soft i{opacity:.16}
.kr-alt .kr-soft i:nth-child(1){left:auto;right:-8%;top:-10%}
.kr-alt .kr-soft i:nth-child(2){right:auto;left:-6%;top:35%}
.kr-s-proc .kr-soft i:nth-child(1){left:20%;top:-30%}
.kr-s-proc .kr-soft i:nth-child(2){right:-10%;top:40%}
.kr-s-contact .kr-soft i:nth-child(1){left:-10%;top:10%}
.kr-s-contact .kr-soft i:nth-child(3){left:auto;right:10%;bottom:-25%}
.kr-s-about .kr-soft i:nth-child(3){left:auto;right:5%;bottom:-25%}

/* logo lockup */
.kr-mark{width:40px;height:40px}
.kr-mark-lg{width:68px;height:68px}
.kr-bt .kr-wm{font-size:18px;gap:.3em}
.kr-wm b{font-weight:800;letter-spacing:-.03em}
.kr-wm i{font-weight:800;letter-spacing:-.03em;background:linear-gradient(90deg,var(--ac) 0%,#8B5CF6 55%,#C026D3 100%);background-size:100% 100%;animation:none;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.kr-bt small{font-weight:600;letter-spacing:.02em;margin-left:1px}
.kr-brand{gap:11px}
.kr-id-name .kr-wm{font-size:27px}

/* ===== v5: eyebrow, code card, badge, skills, preloader, cursor, spotlight ===== */
.kr-eb{display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;font:600 14px "DM Sans",sans-serif;color:var(--ac)}
.kr-eb b{padding:3px 10px;border-radius:99px;background:var(--acs);font:700 12px "Sora",sans-serif;letter-spacing:.04em}
.kr-eb::after{content:"";width:42px;height:1px;background:currentColor;opacity:.5}
.kr-sub{margin:44px 0 18px;font-size:clamp(22px,3vw,28px);letter-spacing:-.025em}
.kr-skg{display:grid;gap:16px}
@media(min-width:700px){.kr-skg{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.kr-skg{grid-template-columns:repeat(4,1fr)}}
.kr-sk h4{margin:0 0 14px;font:700 16px "Sora",sans-serif;color:var(--ink);letter-spacing:-.01em}
.kr-sk .kr-tags li{padding:5px 12px;font-size:13px}
.kr-code{margin:0 0 20px;border-radius:16px;background:#0A1020;border:1px solid rgba(255,255,255,.08);overflow:hidden}
.kr-code-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:rgba(255,255,255,.05);font:500 12px "DM Sans",sans-serif;color:#8B97B0}
.kr-code-bar i{width:9px;height:9px;border-radius:50%;background:#FF5F57}.kr-code-bar i:nth-child(2){background:#FEBC2E}.kr-code-bar i:nth-child(3){background:#28C840}
.kr-code-bar span{margin-left:8px}
.kr-code pre{margin:0;padding:14px 16px 16px;font:500 13px/1.8 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#C9D4EE;white-space:pre-wrap;overflow-wrap:anywhere}
.kr-code code{font:inherit}.kr-cl{display:block}
.kr-code .k{color:#8EA2FF}.kr-code .s{color:#7CF0BC}.kr-code .b{color:#FFB86B}
.kr-caret{display:inline-block;width:7px;height:15px;margin-left:3px;vertical-align:-2px;background:#8EA2FF;animation:kr-blink 1s steps(1) infinite}
@keyframes kr-blink{50%{opacity:0}}
.kr-badge-w{position:absolute;z-index:2;top:-38px;right:-12px;width:104px;height:104px;border-radius:50%;background:var(--ink);color:var(--bg);box-shadow:0 16px 30px -14px rgba(0,0,0,.45)}
.kr-badge-w svg{display:block;width:100%;height:100%}
.kr-badge-w text{font:700 8.2px "DM Sans",sans-serif;letter-spacing:.05em;fill:currentColor}
.kr-spin{transform-origin:50px 50px;animation:kr-spin 18s linear infinite}
@keyframes kr-spin{to{transform:rotate(360deg)}}
.kr-badge-dot{fill:var(--ok)}
@media(max-width:640px){.kr-badge-w{display:none}}
.kr-spot{position:relative;overflow:hidden}
.kr-spot::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),var(--acs),transparent 65%);opacity:0;transition:opacity .35s;pointer-events:none}
.kr-spot:hover::before{opacity:1}
.kr-spot>*{position:relative}
.kr-fine{margin-top:4px;font-size:13px;color:#8F9BB4}
.kr-foot a{color:var(--ink)}
.kr-btn.kr-mag,.kr-ibtn.kr-mag,.kr-soc a.kr-mag{transition:background .2s,border-color .2s,color .2s}
.kr-pre{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#0A1020;color:#fff;animation:kr-pre-out .5s 3.6s forwards}
.kr-pre-skip .kr-pre{display:none}
.kr-pre-in{display:grid;justify-items:center;gap:18px}
.kr-pre .kr-mark-lg{width:76px;height:76px}
.kr-pre .kr-wm{font-size:26px}.kr-pre .kr-wm b{color:#fff}
.kr-pre-bar{display:block;width:180px;height:3px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.kr-pre-bar i{display:block;height:100%;background:linear-gradient(90deg,#3355FF,#8B5CF6,#22D3EE);transform:scaleX(0);transform-origin:0 50%}
@keyframes kr-pre-out{to{opacity:0;visibility:hidden}}
.kr-cur{display:none}
@media(hover:hover) and (pointer:fine){
  .kr-cur{display:block;position:fixed;left:0;top:0;z-index:600;pointer-events:none}
  .kr-cur::before{content:"";position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--ac);opacity:0;transition:opacity .3s,transform .3s,background .3s}
  .kr-cur.is-on::before{opacity:.9}.kr-cur.is-hover::before{transform:scale(1.7);background:var(--acs)}
}
.kr-gsap .kr-mq-t{animation:none}
.kr-nav-wrap{will-change:transform}
.kr-contact .kr-eb{color:#8EA2FF}.kr-contact .kr-eb b{background:rgba(142,162,255,.16)}

/* ===== v6: Lenis, stacked projects, palette, dots, top button, GitHub card ===== */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}
kbd{display:inline-block;padding:2px 7px;margin-right:3px;border-radius:6px;border:1px solid var(--line);background:var(--sf2);color:var(--ink);font:600 11px/1.5 "DM Sans",sans-serif}
.kr-hint{display:none;align-items:center;gap:8px;margin-top:20px;font-size:13.5px}
@media(hover:hover) and (pointer:fine){.kr-hint{display:flex}}

/* marquee rows */
.kr-mq-r{margin-top:10px;animation-direction:reverse}
.kr-mq-r .kr-mq-g span{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.6)}
.kr-mq-r .kr-mq-g span::after{opacity:.6}

/* stacked projects */
.kr-stack{display:grid;gap:26px}
.kr-sc-in{position:relative;display:grid;gap:26px;padding:clamp(18px,3.2vw,40px);border-radius:30px;background:var(--sf);background:radial-gradient(70% 90% at 100% 0%,color-mix(in srgb,var(--ca) 18%,transparent),transparent 70%),var(--sf);border:1px solid var(--line);transform-origin:50% 0;will-change:transform}
.kr-sc-in::after{content:"";position:absolute;left:0;top:0;width:100%;height:3px;border-radius:30px 30px 0 0;background:linear-gradient(90deg,var(--ca),transparent 70%);opacity:.9}
.kr-sc-shot{order:-1;display:block;perspective:1100px;text-decoration:none}
.kr-sc-info{display:flex;flex-direction:column;justify-content:center;gap:14px;min-width:0}
.kr-sc-top{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 10px}
.kr-sc-n{font:800 clamp(52px,7vw,92px)/.9 "Sora",sans-serif;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--ca)}
.kr-sc-of{font:600 14px "Sora",sans-serif;color:var(--mut);margin-right:6px}
.kr-sc-top .kr-cat{color:var(--ca);background:color-mix(in srgb,var(--ca) 16%,transparent)}
.kr-sc-info h3{font-size:clamp(26px,3.6vw,42px);letter-spacing:-.035em;line-height:1.08}
.kr-sc-info h3 a{color:var(--ink);text-decoration:none}.kr-sc-info h3 a:hover{color:var(--ca)}
.kr-sc-info>p{font-size:16px;max-width:46ch}
.kr-sc-info .kr-pj-l{border-top:0;padding-top:6px}
.kr-sc-info .kr-pj-l a{color:var(--ca)}
.kr-frame{overflow:hidden;border-radius:16px;background:var(--sf2);border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(0,0,0,.65),0 0 0 6px color-mix(in srgb,var(--ca) 12%,transparent)}
.kr-frame-bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;background:var(--sf);border-bottom:1px solid var(--line)}
.kr-frame-bar i{width:9px;height:9px;border-radius:50%;background:#FF5F57;flex:none}.kr-frame-bar i:nth-child(2){background:#FEBC2E}.kr-frame-bar i:nth-child(3){background:#28C840}
.kr-frame-bar em{margin:0 auto;padding:3px 14px;max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:99px;background:var(--sf2);color:var(--mut);font:500 11.5px "DM Sans",sans-serif;font-style:normal}
.kr-frame-body{position:relative;aspect-ratio:21/10;overflow:hidden;background:linear-gradient(135deg,var(--acs),var(--sf2))}
.kr-frame-body img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:object-position .8s ease}
.kr-sc-shot:hover .kr-frame-body img{object-position:50% 100%;transition-duration:4s}
.kr-frame-body .kr-ph{inset:0}
@media(min-width:900px){.kr-sc-in{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:clamp(28px,4vw,56px)}.kr-sc-shot{order:0}}
@media(min-width:900px) and (min-height:700px){
  .kr-stack{gap:0}
  .kr-sc{position:sticky;top:calc(var(--ab) + 96px + var(--i) * 14px);padding-bottom:34px}
  .kr-sc:last-child{padding-bottom:0}
}

/* command palette */
.kr-pal-o{position:fixed;inset:0;z-index:900;display:none;align-items:flex-start;justify-content:center;padding:calc(var(--ab) + 11vh) 16px 16px;background:rgba(5,8,18,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.kr-pal-o.is-open{display:flex}
.kr-pal{display:flex;flex-direction:column;width:100%;max-width:580px;max-height:72vh;overflow:hidden;border-radius:22px;background:var(--sf);border:1px solid var(--line);box-shadow:0 40px 90px -20px rgba(0,0,0,.55)}
.kr-pal-in{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);color:var(--mut)}
.kr-pal-in input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:500 17px "DM Sans",sans-serif}
.kr-pal ul{overflow:auto;padding:8px 8px 10px;margin:0}
.kr-pal .g{padding:12px 14px 6px;font:700 11px "DM Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.kr-pal [role=option]{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;color:var(--ink);font-size:15.5px;font-weight:500;cursor:pointer}
.kr-pal [role=option] small{font-size:12px;color:var(--mut)}
.kr-pal [aria-selected=true]{background:var(--acs)}
.kr-pal-empty{padding:26px;text-align:center;font-size:14.5px}
.kr-pal-foot{display:flex;gap:16px;padding:10px 18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mut)}

/* section dots */
.kr-dots{display:none}
@media(min-width:1280px){
  .kr-dots{position:fixed;right:22px;top:50%;z-index:60;display:flex;flex-direction:column;gap:14px;transform:translateY(-50%)}
  .kr-dots a{position:relative;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--mut);opacity:.55;transition:transform .25s,background .25s,opacity .25s,border-color .25s}
  .kr-dots a.is-active{background:var(--ac);border-color:var(--ac);opacity:1;transform:scale(1.35)}
  .kr-dots a span{position:absolute;right:22px;top:50%;transform:translateY(-50%);padding:3px 11px;border-radius:99px;background:var(--ink);color:var(--bg);font:600 12px "DM Sans",sans-serif;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}
  .kr-dots a:hover span{opacity:1}
}

/* back to top with progress ring */
.kr-top{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:70;display:grid;place-items:center;width:50px;height:50px;border:0;border-radius:50%;background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .3s,transform .3s,visibility .3s}
.kr-top.is-show{opacity:1;visibility:visible;transform:none}
.kr-top .kr-i{position:relative}
.kr-top-r{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.kr-top-bg,.kr-top-ring{fill:none;stroke-width:2.5}
.kr-top-bg{stroke:var(--line)}
.kr-top-ring{stroke:var(--ac);stroke-linecap:round;stroke-dasharray:125.66px;stroke-dashoffset:calc(125.66px * (1 - var(--p,0)))}

/* GitHub live card */
.kr-gh{margin-top:22px;padding:clamp(20px,3vw,32px);border-radius:26px;background:#0A1020;border:1px solid rgba(255,255,255,.08);color:#B5BFD3}
.kr-gh[hidden]{display:none}
.kr-gh-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}
.kr-gh-h h3{margin:0;font-size:20px;color:#F4F6FF}
.kr-gh-h h3 span{color:#8EA2FF;font-weight:600}
.kr-gh-st{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px}
.kr-gh-st b{margin-right:5px;font:700 20px "Sora",sans-serif;color:#F4F6FF}
.kr-gh-l{display:grid;gap:12px}
@media(min-width:760px){.kr-gh-l{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.kr-gh-l{grid-template-columns:repeat(4,1fr)}}
.kr-gh-l a{display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#B5BFD3;text-decoration:none;transition:transform .25s,border-color .25s}
.kr-gh-l a:hover{transform:translateY(-3px);border-color:#8EA2FF}
.kr-gh-l strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#F4F6FF;font-weight:600}
.kr-gh-l small{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px}
.kr-gh-l small span{display:inline-flex;align-items:center;gap:4px}
.kr-gh-l .kr-i{width:13px;height:13px}

/* cursor label + form state */
.kr-cur span{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(.5);opacity:0;color:var(--bg);font:700 12px "DM Sans",sans-serif;transition:opacity .25s,transform .25s;white-space:nowrap}
.kr-cur.is-label::before{opacity:1;transform:scale(2.4);background:var(--ac);border-color:var(--ac)}
.kr-cur.is-label span{opacity:1;transform:translate(-50%,-50%) scale(1)}
.kr-form.is-busy .kr-btn{opacity:.65;pointer-events:none}
.kr-tick{display:inline-block;margin-right:6px}

/* lighter background effects on phones and tablets (smoother scrolling, less battery) */
@media(max-width:900px){
  .kr-soft{display:none}
  .kr-bg i{filter:blur(48px);animation:none;will-change:auto}
  .kr-contact::before,.kr-contact::after{animation:none;filter:blur(50px)}
  .kr-hero>.kr-bg::after{display:none}
}

/* ===== v6.1: motion upgrades (curtain, case study, terminal, playground, effects) ===== */

/* section accent that shifts as you scroll (falls back to the normal accent) */
.kr-progress{background:var(--sc,var(--ac))}
.kr-top-ring{stroke:var(--sc,var(--ac))}
@media(min-width:1280px){.kr-dots a.is-active{background:var(--sc,var(--ac));border-color:var(--sc,var(--ac))}}

/* page-transition curtain */
.kr-curtain{position:fixed;inset:0;z-index:950;pointer-events:none;visibility:hidden}
.kr-curtain i{position:absolute;inset:0;background:#0A1020;transform:translateY(101%)}
.kr-curtain i:nth-child(2){background:linear-gradient(135deg,#3355FF,#8B5CF6 60%,#22D3EE)}
.kr-curtain.is-on,html.kr-cv .kr-curtain{visibility:visible;pointer-events:auto}
html.kr-cv .kr-curtain i{transform:none}
html.kr-cv .kr-curtain{animation:kr-cv-safe .01s 3.2s forwards}
@keyframes kr-cv-safe{to{visibility:hidden}}

/* button ripple */
.kr-btn{position:relative;overflow:hidden}
.kr-rip{position:absolute;border-radius:50%;background:currentColor;opacity:.28;transform:scale(0);pointer-events:none}

/* confetti canvas + toast */
.kr-confetti{position:fixed;inset:0;width:100%;height:100%;z-index:960;pointer-events:none}
.kr-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:970;max-width:calc(100% - 32px);padding:11px 20px;border-radius:99px;background:var(--ink);color:var(--bg);font:600 14px/1.4 "DM Sans",sans-serif;text-align:center;opacity:0;visibility:hidden;transform:translate(-50%,16px);transition:opacity .3s,transform .3s,visibility .3s;pointer-events:none}
.kr-toast.is-on{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* sound toggle (desktop nav; also in the command palette) */
.kr-snd{display:none}
@media(min-width:900px){.kr-snd{display:grid}}
.kr-snd .kr-i:last-child{display:none}
.kr-snd[aria-pressed=true] .kr-i:first-child{display:none}
.kr-snd[aria-pressed=true] .kr-i:last-child{display:block}

/* theme switch: circular reveal (View Transitions API, ignored where unsupported) */
html.kr-vt::view-transition-old(root),html.kr-vt::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.kr-vt::view-transition-old(root){z-index:1}
html.kr-vt::view-transition-new(root){z-index:2}

/* form success tick */
.kr-check{display:inline-block;width:20px;height:20px;margin:-4px 8px -4px 0;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.kr-check circle{stroke-dasharray:63;stroke-dashoffset:63;animation:kr-draw .6s ease-out forwards}
.kr-check path{stroke-dasharray:24;stroke-dashoffset:24;animation:kr-draw .45s .35s ease-out forwards}
@keyframes kr-draw{to{stroke-dashoffset:0}}

/* experience line draws itself, entries light up */
.kr-gsap .kr-tl{position:relative}
.kr-gsap .kr-tl::after{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--ac),#8B5CF6);transform:scaleY(var(--tl,0));transform-origin:50% 0;pointer-events:none}
.kr-gsap .kr-tl li::before{z-index:1;transition:background .4s,transform .4s,box-shadow .4s}
.kr-gsap .kr-tl li:not(.is-lit)::before{background:var(--line);transform:scale(.8)}
.kr-gsap .kr-tl li.is-lit::before{box-shadow:0 0 0 5px var(--acs)}
.kr-gsap .kr-tl li>*{transition:opacity .5s,transform .5s}
.kr-gsap .kr-tl li:not(.is-lit)>*{opacity:.4;transform:translateX(6px)}

/* pinned horizontal services (desktop only, class added by JS) */
.kr-hs{height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--ab) + 84px);padding-bottom:36px}
.kr-hs>.kr-wrap{width:100%}
.kr-hs .kr-sh{margin-bottom:26px}
.kr-hs .kr-svc{display:flex;grid-template-columns:none;gap:20px;width:max-content;max-width:none;will-change:transform}
.kr-hs .kr-svc-i{flex:none;width:clamp(300px,26vw,380px)}
.kr-hs-prog{height:3px;margin-top:30px;border-radius:3px;background:var(--line);overflow:hidden}
.kr-hs-prog i{display:block;height:100%;background:var(--sc,var(--ac));transform:scaleX(0);transform-origin:0 50%}

/* cursor: stretchy blob */
@media(hover:hover) and (pointer:fine){
  .kr-cur::before{transform:rotate(var(--r,0rad)) scale(calc(var(--k,1) * var(--sx,1)),calc(var(--k,1) * var(--sy,1)));transition:opacity .3s,background .3s,border-color .3s,transform .12s linear}
  .kr-cur.is-hover{--k:1.7}.kr-cur.is-label{--k:2.4}
  .kr-cur.is-hover::before,.kr-cur.is-label::before{transform:rotate(var(--r,0rad)) scale(calc(var(--k,1) * var(--sx,1)),calc(var(--k,1) * var(--sy,1)))}
}
.kr-trail{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* terminal opener + terminal window */
.kr-tlink{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:8px 14px 8px 10px;border-radius:99px;border:1px dashed var(--line);background:transparent;color:var(--ink);font:600 13.5px/1 "DM Sans",sans-serif;cursor:pointer;transition:border-color .2s,background .2s}
.kr-tlink:hover{border-color:var(--ac);background:var(--acs)}
.kr-tlink .kr-i{width:16px;height:16px;color:var(--ac)}
.kr-hint+.kr-tlink{margin-left:0}
.kr-term{position:fixed;z-index:880;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));display:none;flex-direction:column;width:min(660px,calc(100% - 32px));height:min(420px,62vh);height:min(420px,62svh);border-radius:16px;background:#0A1020;border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 90px -20px rgba(0,0,0,.65);color:#C9D4EE;font:500 13.5px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:hidden}
.kr-term.is-open{display:flex}
.kr-term-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:rgba(255,255,255,.06);color:#8B97B0;font:500 12px "DM Sans",sans-serif;flex:none}
.kr-term-bar i{width:10px;height:10px;border-radius:50%;background:#FEBC2E}.kr-term-bar i+i{background:#28C840}
.kr-term-x{width:14px;height:14px;padding:0;border:0;border-radius:50%;background:#FF5F57;cursor:pointer;flex:none;box-shadow:0 0 0 6px transparent}
.kr-term-bar span{margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kr-term-out{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 16px 4px}
.kr-term-out div{white-space:pre-wrap;overflow-wrap:anywhere}
.kr-term-out .c{color:#7CF0BC}.kr-term-out .m{color:#8B97B0}.kr-term-out .e{color:#FFB4B4}.kr-term-out .h{color:#8EA2FF}
.kr-term-in{display:flex;align-items:center;gap:10px;padding:10px 16px 14px;border-top:1px solid rgba(255,255,255,.08);flex:none;cursor:text}
.kr-term-in span{color:#7CF0BC}
.kr-term-in input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#F4F6FF;font:500 16px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;caret-color:#8EA2FF}
@media(max-width:560px){.kr-term{right:8px;left:8px;width:auto;bottom:calc(8px + env(safe-area-inset-bottom));height:min(380px,58vh);height:min(380px,58svh)}}

/* skills playground */
.kr-play{margin-top:22px;padding:clamp(18px,3vw,28px);border-radius:26px;background:var(--sf);border:1px solid var(--line)}
.kr-play-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 18px;margin-bottom:16px}
.kr-play-h h3{margin:0;font-size:20px}
.kr-play-h p{font-size:14px}
.kr-play-box{position:relative;display:flex;flex-wrap:wrap;gap:8px}
.kr-chip{display:inline-block;padding:7px 14px;border-radius:99px;background:var(--sf2);border:1px solid var(--line);color:var(--ink);font:600 13.5px/1.25 "DM Sans",sans-serif;white-space:nowrap}
.kr-play-box.is-live{display:block;height:clamp(300px,40vw,380px);border-radius:18px;border:1px dashed var(--line);background:var(--bg);overflow:hidden;touch-action:pan-y;cursor:grab}
.kr-play-box.is-live .kr-chip{position:absolute;left:0;top:0;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;will-change:transform}
.kr-chip.is-drag{cursor:grabbing;border-color:var(--ac);background:var(--acs)}

/* project case-study overlay */
.kr-case{position:fixed;inset:0;z-index:850;display:none;background:rgba(5,8,18,.74);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.kr-case.is-open{display:block}
.kr-case-p{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;padding:calc(var(--ab) + 20px) clamp(12px,4vw,48px) 40px}
.kr-case-card{position:relative;max-width:var(--w);margin:0 auto;display:grid;gap:24px;padding:clamp(18px,3.2vw,40px);color:var(--mut)}
.kr-case-card::before{content:"";position:absolute;inset:0;border-radius:30px;background:radial-gradient(70% 90% at 100% 0%,color-mix(in srgb,var(--ca,#5B7CFF) 18%,transparent),transparent 70%),var(--sf);border:1px solid var(--line);opacity:var(--ba,1)}
.kr-case-media,.kr-case-info{position:relative;min-width:0}
.kr-case-media .kr-frame{transform-origin:0 0}
.kr-case-info{display:flex;flex-direction:column;justify-content:center;gap:14px}
.kr-case-info .kr-sc-top{display:flex}
.kr-case-info h3{font-size:clamp(26px,3.6vw,42px);letter-spacing:-.035em;line-height:1.08}
.kr-case-info h3 a{color:var(--ink);text-decoration:none}
.kr-case-info>p{font-size:16px;max-width:46ch}
.kr-case-info .kr-pj-l{border-top:0;padding-top:6px}
.kr-case-info .kr-pj-l a{color:var(--ca,var(--ac))}
.kr-case-info .kr-sc-top .kr-cat{color:var(--ca,var(--ac));background:color-mix(in srgb,var(--ca,#5B7CFF) 16%,transparent)}
.kr-case-x{position:absolute;z-index:3;top:14px;right:14px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--glass);color:var(--ink);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.kr-case-x:hover{background:var(--ac);border-color:var(--ac);color:var(--bg)}
@media(min-width:900px){.kr-case-p{padding-top:calc(var(--ab) + 40px)}.kr-case-card{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(28px,4vw,56px)}}
@media(max-width:899px){.kr-case-info .kr-sc-n{font-size:52px}.kr-case-media{margin-top:34px}}

/* Konami surprise */
@keyframes kr-hue{to{filter:hue-rotate(360deg)}}
html.kr-party .kr-bg{animation:kr-hue 2s linear 3}
html.kr-party .kr-mark{animation:kr-hue 1.5s linear 4}

@media(prefers-reduced-motion:reduce){
  .kr-check circle,.kr-check path{stroke-dashoffset:0!important}
  .kr-curtain,.kr-trail,.kr-confetti{display:none!important}
}

/* project detail: client line and Problem / Solution / Result */
.kr-client{margin-bottom:8px;font:600 15px "Sora",sans-serif;color:var(--ink)}
.kr-cs{margin-top:30px;padding-left:20px;border-left:3px solid var(--ac)}
.kr-cs h2{margin-bottom:10px;font-size:clamp(22px,3vw,28px);letter-spacing:-.025em}
.kr-cs p{max-width:68ch;font-size:17px}