*,:before,:after{box-sizing:border-box;transition:background-color var(--color-transition-duration) ease, color var(--color-transition-duration) ease, border-color var(--color-transition-duration) ease}:root{--ff-primary:"Inter", "Source Sans Pro", system-ui, -apple-system, sans-serif;--ff-secondary:"JetBrains Mono", "Source Code Pro", "Fira Code", monospace;--ff-heading:"Poppins", "Inter", sans-serif;--fw-light:300;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-black:900;--clr-light:#f8f9fa;--clr-off-white:#fff;--clr-dark:#1a1a2e;--clr-gray:#6c757d;--clr-gray-light:#e9ecef;--clr-primary:#06c;--clr-primary-light:#4d94ff;--clr-primary-dark:#004c99;--clr-accent:#00b4d8;--clr-accent-light:#90e0ef;--clr-success:#06d6a0;--clr-text-primary:#1a1a2e;--clr-text-secondary:#495057;--clr-text-light:#6c757d;--color-transition-duration:.5s;--fs-h1:clamp(2.5rem, 5vw + 1rem, 4.5rem);--fs-h2:clamp(2rem, 4vw + 1rem, 3.5rem);--fs-h3:clamp(1.5rem, 2.5vw + .5rem, 2.25rem);--fs-h4:clamp(1.25rem, 2vw + .5rem, 1.75rem);--fs-body:clamp(1rem, 1vw + .5rem, 1.125rem);--fs-small:.875rem;--fs-extra-small:.75rem;--spacing-xs:.5rem;--spacing-sm:1rem;--spacing-md:2rem;--spacing-lg:3rem;--spacing-xl:5rem;--spacing-2xl:8rem;--shadow-sm:0 1px 3px #0000001f, 0 1px 2px #0000003d;--shadow-md:0 4px 6px #0000001a, 0 2px 4px #0000000f;--shadow-lg:0 10px 20px #00000026, 0 3px 6px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a;--radius-sm:.25rem;--radius-md:.5rem;--radius-lg:1rem;--radius-xl:1.5rem;--radius-full:9999px;--transition-fast:.15s ease-in-out;--transition-base:.25s ease-in-out;--transition-slow:.35s ease-in-out;--z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-modal-backdrop:1040;--z-modal:1050;--z-popover:1060;--z-tooltip:1070}html{scroll-behavior:smooth;font-size:16px}body{background:var(--clr-light);color:var(--clr-text-primary);transition:background-color var(--color-transition-duration) ease, color var(--color-transition-duration) ease;font-family:var(--ff-primary);font-size:var(--fs-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;line-height:1.6}section{padding:var(--spacing-xl) var(--spacing-md)}img{max-width:100%;height:auto;display:block}strong{font-weight:var(--fw-bold)}:focus{outline:3px solid var(--clr-accent);outline-offset:3px}:focus:not(:focus-visible){outline:none}::selection{background:var(--clr-accent-light);color:var(--clr-dark)}.btn{background:var(--clr-primary);color:#fff;cursor:pointer;font-size:var(--fs-body);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.05em;border-radius:var(--radius-md);transition:all var(--transition-base);box-shadow:var(--shadow-sm);border:2px solid #0000;padding:.75em 2em;text-decoration:none;display:inline-block}.btn:hover,.btn:focus{background:var(--clr-primary-dark);box-shadow:var(--shadow-md);transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn--secondary{color:var(--clr-primary);border-color:var(--clr-primary);background:0 0}.btn--secondary:hover{background:var(--clr-primary);color:#fff}h1,h2,h3,h4,h5,h6{line-height:1.2;font-family:var(--ff-heading);font-weight:var(--fw-bold);margin:0}h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}h4{font-size:var(--fs-h4)}p{margin-top:0;margin-bottom:1em}.section__title{margin-bottom:.5em;position:relative}.section__subtitle{font-size:var(--fs-h4);font-weight:var(--fw-medium);margin:0}.section__subtitle--intro,.section__subtitle--about{background:linear-gradient(135deg, var(--clr-accent) 0%, var(--clr-primary-light) 100%);font-family:var(--ff-secondary);border-radius:var(--radius-md);color:#fff;transition:all var(--transition-base);cursor:pointer;margin-bottom:1.5em;padding:.5em 1em;text-decoration:none;display:inline-block}.section__subtitle--intro:hover,.section__subtitle--about:hover{box-shadow:var(--shadow-md);opacity:.95;transform:translateY(-2px)}.section__subtitle--work{color:var(--clr-accent-light);font-weight:var(--fw-semibold);margin-bottom:2em}.uberbar{-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--clr-gray-light);z-index:var(--z-fixed);transition:all var(--transition-base);box-shadow:var(--shadow-sm);background:#f8f9faf2;padding:1rem 2rem;position:fixed;top:0;left:0;right:0}header{justify-content:space-between;align-items:center;max-width:1400px;margin:0 auto;display:flex}.logo{font-size:1.5rem;font-weight:var(--fw-bold);color:var(--clr-primary);font-family:var(--ff-heading);transition:color var(--transition-fast);text-decoration:none}.logo:hover{color:var(--clr-accent)}.nav{background:var(--clr-primary);color:var(--clr-light);z-index:9999;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--transition-base), visibility var(--transition-base), pointer-events var(--transition-base);position:fixed;inset:0}.nav__list{justify-content:center;align-items:center;gap:var(--spacing-md);flex-direction:column;height:100%;margin:0;padding:0;list-style:none;display:flex}.nav__item{display:block}.nav__link{font-weight:var(--fw-semibold);font-size:var(--fs-h3);transition:color var(--transition-base);padding:.5em;text-decoration:none;position:relative}.nav__link:after{content:"";background:var(--clr-accent-light);width:0;height:2px;transition:all var(--transition-base);position:absolute;bottom:0;left:50%;transform:translate(-50%)}.nav__link:hover:after{width:100%}.nav-toggle{cursor:pointer;z-index:10000;transition:transform var(--transition-base);background:0 0;border:none;padding:.5em;position:relative}.nav-toggle:hover{transform:scale(1.1)}.nav-open .nav{opacity:1;visibility:visible;pointer-events:auto;background:var(--clr-primary)}@media (width<=790px){.nav-open .nav{z-index:9999;background:var(--clr-primary);opacity:1!important}.nav__list{box-sizing:border-box;background:var(--clr-primary);flex-direction:column;justify-content:center;align-items:center;gap:1rem;height:100vh;padding:1rem;display:flex;overflow:visible}.nav__link{color:#fff;font-size:1.25rem;display:inline-block;opacity:1!important;visibility:visible!important}.nav__link:hover,.nav__link:focus{color:#90e0ef}.nav-open .nav__list,.nav-open .nav__item,.nav-open .nav__link{opacity:1!important;visibility:visible!important}.nav__item{text-align:center;width:100%;opacity:1!important;visibility:visible!important}.nav__item--dropdown{text-align:center;flex-direction:column;align-items:center;width:100%;display:flex}.nav__link--dropdown{text-align:center;justify-content:center}}.nav-open .nav-toggle{position:fixed;top:1.5em;right:1.5em}.hamburger{display:block;position:relative}.hamburger,.hamburger:before,.hamburger:after{background:var(--clr-primary);border-radius:var(--radius-full);width:2em;height:3px;transition:all var(--transition-base)}.hamburger:before,.hamburger:after{content:"";position:absolute;left:0;right:0}.hamburger:before{top:8px}.hamburger:after{bottom:8px}.nav-open .hamburger{background:var(--clr-accent);transform:rotate(225deg)}.nav-open .hamburger:before{background:var(--clr-accent);transform:rotate(90deg)translate(8px)}.nav-open .hamburger:after{opacity:0}@media (width>=791px){.nav-toggle{display:none}.nav{color:var(--clr-text-primary);opacity:1;visibility:visible;pointer-events:auto;z-index:auto;background:0 0;position:static;transform:none}.nav__list{gap:var(--spacing-md);flex-direction:row;height:auto}.nav__link{font-size:var(--fs-body);color:var(--clr-text-secondary)}.nav__link:hover{color:var(--clr-primary)}}.nav__link--dropdown{align-items:center;gap:.25em;display:flex}.nav__link--dropdown i{transition:transform var(--transition-base);font-size:.75em}.nav__item--dropdown:hover .nav__link--dropdown i,.nav__item--dropdown.active .nav__link--dropdown i{transform:rotate(180deg)}.nav__dropdown{background:var(--clr-primary-light);border-radius:var(--radius-md);opacity:0;visibility:hidden;min-width:180px;max-width:min(300px,100vw - 2rem);transition:opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base);z-index:var(--z-dropdown);box-sizing:border-box;margin:.5em 0 0;padding:0;list-style:none;position:absolute;top:100%;left:50%;transform:translate(-50%)translateY(-10px);box-shadow:0 4px 6px #0000001a}.nav__item--dropdown:hover .nav__dropdown,.nav__item--dropdown.active .nav__dropdown{opacity:1;visibility:visible;transform:translate(-50%)translateY(0)}.nav__item--dropdown{position:relative}@media (width>=791px){.nav__dropdown{max-width:min(300px,100vw - 1rem);left:auto;right:0;transform:translate(0)translateY(-10px)}.nav__item--dropdown:hover .nav__dropdown,.nav__item--dropdown.active .nav__dropdown{transform:translate(0)translateY(0)}}.nav__dropdown-item{text-align:center;margin:0;padding:0}.nav__dropdown-link{color:var(--clr-text-primary);font-size:var(--fs-body);font-weight:var(--fw-medium);transition:background-color var(--transition-base), color var(--transition-base);border-radius:var(--radius-md);margin:.25em;padding:.75em 1em;text-decoration:none;display:block}.nav__dropdown-link:hover,.nav__dropdown-link:focus{background-color:var(--clr-primary-light);color:var(--clr-primary)}@media (width<=790px){.nav__dropdown{box-shadow:none;opacity:1;visibility:visible;max-height:0;transition:max-height var(--transition-base);box-sizing:border-box;background:0 0;flex-direction:column;align-items:center;width:100vw;margin:.5em 0 0 calc(50% - 50vw);padding:0;list-style:none;display:flex;position:static;overflow:hidden;transform:none}.nav__item--dropdown.active .nav__dropdown{-webkit-overflow-scrolling:touch;max-height:min(300px,100vh - 150px);overflow-y:auto}.nav__dropdown-link{color:#fff;white-space:nowrap;text-overflow:ellipsis;transition:color var(--transition-base), background-color var(--transition-base);text-align:center;width:auto;margin:0;padding:.5em 1em;display:inline-block;overflow:hidden}.nav__dropdown-link:hover,.nav__dropdown-link:focus{color:#90e0ef;background-color:#ffffff1a}.nav__item--dropdown{text-align:center;flex-direction:column;align-items:center;width:100%;max-width:100%;display:flex}.nav__link--dropdown{text-align:center;justify-content:center}.nav__dropdown-item{text-align:center;justify-content:center;align-items:center;width:100%;margin:0;padding:0;list-style:none;display:flex}.nav__link--dropdown i{transition:transform var(--transition-base)}}.intro{padding-top:calc(var(--spacing-xl) + 4rem);position:relative}.intro__clock{-webkit-user-select:none;user-select:none;cursor:default;flex-direction:column;gap:.1rem;line-height:1.2;display:flex;position:relative}.intro__clock-overlay{-webkit-backdrop-filter:blur(8px);border:1px solid var(--clr-gray-light);border-radius:var(--radius-md);width:180px;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base);z-index:var(--z-tooltip);background:#fffffff7;flex-direction:column;gap:.4rem;padding:.75rem 1rem;display:flex;position:absolute;top:calc(100% + .4rem);right:0;transform:translate(.5rem)}.intro__clock:hover .intro__clock-overlay{opacity:1;visibility:visible;pointer-events:auto;transform:translate(0)}.intro__clock-overlay-title{font-family:var(--ff-primary);font-size:.65rem;font-weight:var(--fw-semibold);color:var(--clr-text-secondary);text-transform:uppercase;letter-spacing:.08em}.intro__clock-overlay-days{font-family:JetBrains Mono,monospace;font-size:.8rem;font-weight:var(--fw-medium);color:var(--clr-text-primary)}.intro__clock-overlay-bar{background:var(--clr-gray-light);border-radius:var(--radius-full);width:100%;height:5px;overflow:hidden}.intro__clock-overlay-fill{background:var(--clr-accent);border-radius:var(--radius-full);height:100%;transition:width .6s}.intro__clock-overlay-pct{color:var(--clr-text-light);text-align:right;font-family:JetBrains Mono,monospace;font-size:.65rem}.intro__clock-date{font-family:var(--ff-primary);font-size:.7rem;font-weight:var(--fw-regular);color:var(--clr-text-secondary);letter-spacing:.03em;text-transform:uppercase}.intro__clock-time{color:var(--clr-text-secondary);letter-spacing:.05em;font-family:JetBrains Mono,monospace;font-size:.85rem;font-weight:500}.intro__greeting{font-size:.6em;font-weight:var(--fw-regular);opacity:.8}.intro__img-link{grid-area:img;text-decoration:none;display:block}.intro__img{box-shadow:var(--shadow-lg);border-radius:var(--radius-lg);object-fit:cover;transition:all var(--transition-base);cursor:pointer;width:100%;display:block}.intro__img-link:hover .intro__img{box-shadow:var(--shadow-xl);transform:scale(1.02)}@media (width>=791px){.intro{grid-column-gap:2em;grid-template:"clock img title""clock img subtitle"/auto min-content max-content;width:min-content;margin:0 auto;display:grid}.intro__clock{grid-area:clock;align-self:start}.intro__img-link{z-index:2;grid-area:img;min-width:280px;position:relative}.intro__img{min-width:280px}.section__subtitle--intro{text-align:right;grid-area:2/-1/auto/1;align-self:start;width:calc(100% + 1.5em);position:relative;left:-1.5em}}@media (width<=790px){.intro__clock{display:none}}.my-projects{background:linear-gradient(135deg, var(--clr-dark) 0%, #16213e 100%);color:var(--clr-light);text-align:center;position:relative;overflow:hidden}.my-projects:before{content:"";opacity:.1;z-index:0;position:absolute;inset:0}.my-projects>*{z-index:1;position:relative}.section__title--projects{color:var(--clr-accent-light);position:relative}.section__title--projects:after{content:"";background:linear-gradient(90deg, transparent, var(--clr-accent), transparent);border-radius:var(--radius-full);width:3em;height:3px;margin:.75em auto 1.5em;display:block}.projects{margin-bottom:4em}.project{max-width:500px;padding:var(--spacing-md);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all var(--transition-base);background:#ffffff0d;border:1px solid #ffffff1a;margin:0 auto 3em}.project:hover{box-shadow:var(--shadow-xl);background:#ffffff14;transform:translateY(-8px)}.project h3{color:var(--clr-accent-light);margin-bottom:.5em}.project p{font-size:var(--fs-body);line-height:1.7}@media (width>=791px){.projects{justify-content:center;gap:var(--spacing-md);flex-wrap:wrap;max-width:1200px;margin-left:auto;margin-right:auto;display:flex}.project{flex:300px;max-width:500px;margin-bottom:0}}.about-me{max-width:1200px;margin:0 auto}.about-me__img{box-shadow:var(--shadow-lg);border-radius:var(--radius-lg)}@media (width<=790px){.about-me__img{display:none}}.about-me__body{font-size:var(--fs-body);line-height:1.8}@media (width>=791px){.about-me{grid-column-gap:3em;grid-template-columns:1fr 300px;grid-template-areas:"title img""subtitle img""text img";display:grid}.section__title--about{grid-area:title}.section__subtitle--about{grid-area:2/1/auto/-1;width:calc(100% + 2em);padding-left:1em;padding-right:calc(300px + 2em);position:relative;left:-1em}.about-me__img{z-index:2;grid-area:img;position:relative}}.my-work{background:var(--clr-dark);color:var(--clr-light);text-align:center}.section__title--work{color:var(--clr-accent-light)}.section__subtitle--work{color:var(--clr-gray-light)}.section__subtitle--work:after{content:"";background:linear-gradient(90deg, transparent, var(--clr-accent), transparent);border-radius:var(--radius-full);width:6em;height:3px;margin:.75em auto 1.5em;display:block}.work{justify-content:center;gap:var(--spacing-md);flex-wrap:wrap;max-width:1400px;margin:0 auto;display:flex}.work__item{background:var(--clr-light);border-radius:var(--radius-lg);transition:all var(--transition-base);max-width:500px;height:300px;min-height:300px;box-shadow:var(--shadow-md);flex:300px;display:block;position:relative;overflow:hidden}.work__item:hover{box-shadow:var(--shadow-xl);transform:translateY(-4px)}.work__item:after{content:"";background:linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-accent) 100%);opacity:0;transition:opacity var(--transition-base);position:absolute;inset:0}.work__item:hover:after{opacity:.2}.work__img{object-fit:cover;object-position:center center;width:100%;height:100%;transition:transform .6s cubic-bezier(.4,0,.2,1);display:block}.work__item:hover .work__img{transform:scale(1.1)}.work__overlay{color:var(--clr-light);padding:var(--spacing-md);transition:transform var(--transition-base);z-index:1;background:linear-gradient(#0000 0%,#1a1a2eb3 30%,#1a1a2ef2 100%);position:absolute;bottom:0;left:0;right:0;transform:translateY(100%)}.work__item:hover .work__overlay{transform:translateY(0)}.work__overlay h3{font-size:var(--fs-h4);color:var(--clr-accent-light);margin:0 0 .5em}.work__overlay p{font-size:var(--fs-body);opacity:.9;margin:0}.work__item:focus{z-index:2;position:relative}.photography{background:var(--clr-light);text-align:center;max-width:1400px;margin:0 auto}.section__title--photography{color:var(--clr-accent-light);margin-bottom:.5em}.section__subtitle--photography{color:var(--clr-text-secondary);font-weight:var(--fw-medium);margin-bottom:2em}.section__subtitle--photography:after{content:"";background:linear-gradient(90deg, transparent, var(--clr-accent), transparent);border-radius:var(--radius-full);width:6em;height:3px;margin:.75em auto 1.5em;display:block}.carousel-container{max-width:1200px;padding:0 var(--spacing-md);margin:0 auto;position:relative}.carousel{border-radius:var(--radius-lg);justify-content:center;align-items:center;width:100%;height:80vh;min-height:500px;display:flex;position:relative;overflow:hidden}.carousel-container{min-height:400px}.carousel-inner{will-change:transform;align-items:center;width:100%;height:100%;transition:transform .5s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.carousel-item{box-sizing:border-box;background:0 0;flex-shrink:0;justify-content:center;align-items:center;width:100%;min-width:100%;height:100%;padding:2rem;display:flex;position:relative;overflow:hidden}.carousel-image{object-fit:contain;cursor:pointer;width:auto;max-width:100%;height:auto;max-height:70vh;transition:transform var(--transition-base);background:0 0;align-self:center;margin:0 auto;display:block}.carousel-image:hover{transform:scale(1.02)}.carousel-btn{border-radius:var(--radius-full);cursor:pointer;width:50px;height:50px;color:var(--clr-primary);z-index:100;transition:all var(--transition-base);box-shadow:var(--shadow-md);pointer-events:auto;background:#ffffffe6;border:none;justify-content:center;align-items:center;font-size:1.25rem;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.carousel-btn:hover{background:var(--clr-off-white);box-shadow:var(--shadow-lg);transform:translateY(-50%)scale(1.1)}.carousel-btn:active{transform:translateY(-50%)scale(.95)}.carousel-btn--prev{left:1rem}.carousel-btn--next{right:1rem}.carousel-modal{width:100%;height:100%;z-index:var(--z-modal);opacity:0;visibility:hidden;transition:opacity var(--transition-base), visibility var(--transition-base);background:#000000f2;justify-content:center;align-items:center;display:flex;position:fixed;top:0;left:0}.carousel-modal--active{opacity:1;visibility:visible}.carousel-modal__content{justify-content:center;align-items:center;max-width:95%;max-height:95vh;display:flex;position:relative}.carousel-modal__content img{object-fit:contain;border-radius:var(--radius-md);max-width:100%;max-height:95vh;box-shadow:var(--shadow-xl)}.carousel-modal__close{border-radius:var(--radius-full);cursor:pointer;width:50px;height:50px;color:var(--clr-light);z-index:11;transition:all var(--transition-base);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:none;justify-content:center;align-items:center;font-size:1.5rem;display:flex;position:absolute;top:2rem;right:2rem}.carousel-modal__close:hover{background:#fff3;transform:scale(1.1)}.carousel-modal__btn{border-radius:var(--radius-full);cursor:pointer;width:60px;height:60px;color:var(--clr-light);z-index:11;transition:all var(--transition-base);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:none;justify-content:center;align-items:center;font-size:1.5rem;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.carousel-modal__btn:hover{background:#fff3;transform:translateY(-50%)scale(1.1)}.carousel-modal__btn--prev{left:2rem}.carousel-modal__btn--next{right:2rem}@media (width<=790px){.carousel-btn{width:40px;height:40px;font-size:1rem}.carousel-btn--prev{left:.5rem}.carousel-btn--next{right:.5rem}.carousel-item{padding:1rem}.carousel-image{max-width:100%;max-height:60vh}.carousel-modal__close{width:40px;height:40px;font-size:1.25rem;top:1rem;right:1rem}.carousel-modal__btn{width:50px;height:50px;font-size:1.25rem}.carousel-modal__btn--prev{left:1rem}.carousel-modal__btn--next{right:1rem}}.color-extractor{background:var(--clr-light);text-align:center;max-width:1400px;margin:0 auto}.section__title--color-extractor{color:var(--clr-accent-light);margin-bottom:.5em}.section__subtitle--color-extractor{color:var(--clr-text-secondary);font-weight:var(--fw-medium);margin-bottom:2em}.section__subtitle--color-extractor:after{content:"";background:linear-gradient(90deg, transparent, var(--clr-accent), transparent);border-radius:var(--radius-full);width:6em;height:3px;margin:.75em auto 1.5em;display:block}.color-extractor__container{max-width:900px;padding:0 var(--spacing-md);margin:0 auto}.color-extractor__upload{margin-bottom:var(--spacing-lg);position:relative}.color-extractor__input{opacity:0;z-index:-1;width:1px;height:1px;position:absolute;overflow:hidden}.color-extractor__label{padding:var(--spacing-xl);border:2px dashed var(--clr-gray);border-radius:var(--radius-lg);background:var(--clr-off-white);cursor:pointer;transition:all var(--transition-base);flex-direction:column;justify-content:center;align-items:center;min-height:200px;display:flex}.color-extractor__label:hover{border-color:var(--clr-primary);background:var(--clr-gray-light)}.color-extractor__upload--dragover .color-extractor__label{border-color:var(--clr-primary);background:var(--clr-primary-light);color:var(--clr-off-white)}.color-extractor__label i{color:var(--clr-primary);margin-bottom:var(--spacing-md);font-size:3rem}.color-extractor__label span{font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--clr-text-primary);margin-bottom:var(--spacing-xs)}.color-extractor__label small{font-size:var(--fs-small);color:var(--clr-text-secondary)}.color-extractor__upload--dragover .color-extractor__label i,.color-extractor__upload--dragover .color-extractor__label span,.color-extractor__upload--dragover .color-extractor__label small{color:var(--clr-off-white)}.color-extractor__preview{margin-bottom:var(--spacing-lg);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--spacing-md);background:0 0;justify-content:center;align-items:center;min-height:300px;display:flex;position:relative;overflow:hidden}.color-extractor__image{object-fit:contain;width:auto;max-width:100%;height:auto;max-height:500px;margin:0 auto;display:block}.color-extractor__reset{border-radius:var(--radius-full);cursor:pointer;width:40px;height:40px;color:var(--clr-primary);transition:all var(--transition-base);box-shadow:var(--shadow-md);z-index:10;background:#ffffffe6;border:none;justify-content:center;align-items:center;font-size:1.25rem;display:flex;position:absolute;top:1rem;right:1rem}.color-extractor__reset:hover{background:var(--clr-off-white);box-shadow:var(--shadow-lg);transform:scale(1.1)}.color-extractor__results{margin-top:var(--spacing-xl)}.color-extractor__results-title{font-size:var(--fs-h3);color:var(--clr-text-primary);margin-bottom:var(--spacing-lg);font-weight:var(--fw-semibold)}.color-results{gap:var(--spacing-md);margin-bottom:var(--spacing-lg);grid-template-columns:repeat(5,1fr);display:grid}.color-swatch{background:var(--clr-off-white);border-radius:var(--radius-lg);padding:var(--spacing-sm);box-shadow:var(--shadow-md);transition:transform var(--transition-base), box-shadow var(--transition-base);align-items:center;gap:var(--spacing-sm);flex-direction:column;display:flex}.color-swatch:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}.color-swatch__box{border-radius:var(--radius-md);width:100%;height:120px;box-shadow:var(--shadow-sm);border:2px solid var(--clr-gray-light)}.color-swatch__info{text-align:center;width:100%}.color-swatch__rank{font-size:var(--fs-small);font-weight:var(--fw-bold);color:var(--clr-primary);margin-bottom:var(--spacing-xs);font-family:var(--ff-secondary)}.color-swatch__hex{font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--clr-text-primary);margin-bottom:var(--spacing-xs);font-family:var(--ff-secondary);letter-spacing:.05em}.color-swatch__rgb{font-size:var(--fs-small);color:var(--clr-text-secondary);margin-bottom:var(--spacing-xs);font-family:var(--ff-secondary)}.color-swatch__percentage{font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--clr-primary);margin-top:var(--spacing-xs)}.color-extractor__error{justify-content:center;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);border-radius:var(--radius-md);color:#c33;margin-top:var(--spacing-md);background:#fee;border:2px solid #fcc;display:none}.color-extractor__error i{font-size:1.5rem}@media (width<=1024px){.color-results{grid-template-columns:repeat(3,1fr)}}@media (width<=790px){.color-extractor__label{min-height:150px;padding:var(--spacing-lg)}.color-extractor__label i{font-size:2rem}.color-results{gap:var(--spacing-md);grid-template-columns:1fr}.color-swatch__box{height:120px}.color-extractor__preview{min-height:250px}.color-extractor__image{max-height:400px}}.resume-comparison{background:var(--clr-light);text-align:center;max-width:1400px;margin:0 auto}.section__title--resume-comparison{color:var(--clr-accent-light);margin-bottom:.5em}.section__subtitle--resume-comparison{color:var(--clr-text-secondary);font-weight:var(--fw-medium);margin-bottom:2em}.section__subtitle--resume-comparison:after{content:"";background:linear-gradient(90deg, transparent, var(--clr-accent), transparent);border-radius:var(--radius-full);width:6em;height:3px;margin:.75em auto 1.5em;display:block}.resume-comparison__container{max-width:900px;padding:0 var(--spacing-md);margin:0 auto}.resume-comparison__upload{margin-bottom:var(--spacing-lg);position:relative}.resume-comparison__input{opacity:0;z-index:-1;width:1px;height:1px;position:absolute;overflow:hidden}.resume-comparison__label{padding:var(--spacing-xl);border:2px dashed var(--clr-gray);border-radius:var(--radius-lg);background:var(--clr-off-white);cursor:pointer;transition:all var(--transition-base);flex-direction:column;justify-content:center;align-items:center;min-height:150px;display:flex}.resume-comparison__label:hover{border-color:var(--clr-primary);background:var(--clr-gray-light)}.resume-comparison__upload--dragover .resume-comparison__label{border-color:var(--clr-primary);background:var(--clr-primary-light);color:var(--clr-off-white)}.resume-comparison__label i{color:var(--clr-primary);margin-bottom:var(--spacing-md);font-size:3rem}.resume-comparison__label span{font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--clr-text-primary);margin-bottom:var(--spacing-xs)}.resume-comparison__label small{font-size:var(--fs-small);color:var(--clr-text-secondary)}.resume-comparison__upload--dragover .resume-comparison__label i,.resume-comparison__upload--dragover .resume-comparison__label span,.resume-comparison__upload--dragover .resume-comparison__label small{color:var(--clr-off-white)}.resume-comparison__job-description{margin-bottom:var(--spacing-lg);text-align:left}.resume-comparison__textarea-label{font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--clr-text-primary);margin-bottom:var(--spacing-sm);display:block}.resume-comparison__textarea{width:100%;padding:var(--spacing-md);border:2px solid var(--clr-gray);border-radius:var(--radius-lg);font-size:var(--fs-body);font-family:var(--ff-primary);color:var(--clr-text-primary);background:var(--clr-off-white);resize:vertical;transition:all var(--transition-base);box-sizing:border-box}.resume-comparison__textarea:focus{border-color:var(--clr-primary);outline:none;box-shadow:0 0 0 3px #0066cc1a}.resume-comparison__textarea::placeholder{color:var(--clr-text-secondary)}.resume-comparison__button{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-xl);background:var(--clr-primary);color:var(--clr-off-white);border-radius:var(--radius-lg);font-size:var(--fs-body);font-weight:var(--fw-semibold);cursor:pointer;transition:all var(--transition-base);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-md);border:none;display:inline-flex}.resume-comparison__button:hover:not(:disabled){background:var(--clr-primary-dark);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.resume-comparison__button:disabled{opacity:.5;cursor:not-allowed;transform:none}.resume-comparison__button i{font-size:1.1em}.resume-comparison__loading{align-items:center;gap:var(--spacing-md);padding:var(--spacing-xl);color:var(--clr-primary);margin-bottom:var(--spacing-lg);flex-direction:column;display:none}.resume-comparison__loading i{font-size:2.5rem;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.resume-comparison__results{margin-top:var(--spacing-xl);text-align:left}.resume-comparison__match-percentage{text-align:center;margin-bottom:var(--spacing-xl);padding:var(--spacing-xl);background:linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-accent) 100%);border-radius:var(--radius-lg);color:var(--clr-off-white);box-shadow:var(--shadow-lg)}.match-percentage__value{font-size:4rem;font-weight:var(--fw-bold);margin-bottom:var(--spacing-sm);line-height:1;font-family:var(--ff-secondary)}.match-percentage__label{font-size:var(--fs-h3);font-weight:var(--fw-semibold);opacity:.9}.resume-comparison__skills-container{gap:var(--spacing-lg);margin-bottom:var(--spacing-lg);grid-template-columns:1fr 1fr;display:grid}.skills-section{background:var(--clr-off-white);padding:var(--spacing-lg);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.skills-section__title{align-items:center;gap:var(--spacing-sm);font-size:var(--fs-h3);font-weight:var(--fw-semibold);color:var(--clr-text-primary);margin-bottom:var(--spacing-md);display:flex}.skills-section--matching .skills-section__title{color:#22c55e}.skills-section--missing .skills-section__title{color:#ef4444}.skills-list{gap:var(--spacing-sm);flex-wrap:wrap;min-height:60px;display:flex}.skill-badge{padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-full);font-size:var(--fs-small);font-weight:var(--fw-medium);transition:all var(--transition-base);display:inline-block}.skill-badge--matching{color:#166534;background:#dcfce7;border:1px solid #86efac}.skill-badge--missing{color:#991b1b;background:#fee2e2;border:1px solid #fca5a5}.skill-badge:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}.skills-empty{color:var(--clr-text-secondary);padding:var(--spacing-md);text-align:center;font-style:italic}.resume-comparison__tutorials{margin-top:var(--spacing-xl);padding-top:var(--spacing-xl);border-top:2px solid var(--clr-gray)}.tutorials-section{margin-bottom:var(--spacing-xl)}.tutorials-section:last-child{margin-bottom:0}.tutorials-section__skill-title{align-items:center;gap:var(--spacing-sm);font-size:var(--fs-h4);font-weight:var(--fw-semibold);color:var(--clr-text-primary);margin-bottom:var(--spacing-md);display:flex}.tutorials-section__skill-title i{color:red;font-size:1.2em}.tutorials-list{gap:var(--spacing-md);flex-direction:column;display:flex}.tutorial-item{gap:var(--spacing-xs);padding:var(--spacing-md);background:var(--clr-gray-light);border:2px solid var(--clr-gray);border-radius:var(--radius-md);color:var(--clr-text-primary);transition:all var(--transition-base);flex-direction:column;text-decoration:none;display:flex;position:relative}.tutorial-item:hover{background:var(--clr-gray);border-color:var(--clr-accent);box-shadow:var(--shadow-md);color:var(--clr-off-white);transform:translateY(-2px)}.tutorial-item__title{font-weight:var(--fw-semibold);font-size:var(--fs-body);line-height:1.4}.tutorial-item__description{font-size:var(--fs-small);color:var(--clr-text-secondary);-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.5;display:-webkit-box;overflow:hidden}.tutorial-item:hover .tutorial-item__description{color:var(--clr-off-white);opacity:.9}.tutorial-item__icon{top:var(--spacing-md);right:var(--spacing-md);font-size:var(--fs-small);opacity:.6;transition:opacity var(--transition-base);position:absolute}.tutorial-item:hover .tutorial-item__icon{opacity:1}.resume-comparison__reset{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);background:var(--clr-gray-light);color:var(--clr-text-primary);border:2px solid var(--clr-gray);border-radius:var(--radius-lg);font-size:var(--fs-body);font-weight:var(--fw-medium);cursor:pointer;transition:all var(--transition-base);margin-top:var(--spacing-lg);display:inline-flex}.resume-comparison__reset:hover{background:var(--clr-gray);color:var(--clr-off-white);border-color:var(--clr-gray);box-shadow:var(--shadow-md);transform:translateY(-2px)}.resume-comparison__error{justify-content:center;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);border-radius:var(--radius-md);color:#c33;margin-top:var(--spacing-md);background:#fee;border:2px solid #fcc;display:none}.resume-comparison__error i{font-size:1.5rem}@media (width<=790px){.resume-comparison__label{min-height:120px;padding:var(--spacing-lg)}.resume-comparison__label i{font-size:2rem}.resume-comparison__skills-container{grid-template-columns:1fr}.match-percentage__value{font-size:3rem}.resume-comparison__match-percentage{padding:var(--spacing-lg)}}.footer{color:var(--clr-accent-light);text-align:center;padding:var(--spacing-xl) var(--spacing-md);background:#0a0a0a}.footer a{color:inherit;transition:all var(--transition-fast);text-decoration:none}.footer__link{font-weight:var(--fw-semibold);font-size:var(--fs-h4)}.footer__link:hover,.social-list__link:hover{color:var(--clr-accent)}.footer__link:hover{text-decoration:underline}.social-list{justify-content:center;gap:var(--spacing-sm);margin:2em 0 0;padding:0;list-style:none;display:flex}.social-list__link{border-radius:var(--radius-full);transition:all var(--transition-base);background:#ffffff0d;justify-content:center;align-items:center;padding:.75em;display:flex}.social-list__link:hover{background:#ffffff1a;transform:translateY(-3px)}@keyframes fadeIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:.6s ease-out forwards fadeIn}.container{max-width:1400px;padding:0 var(--spacing-md);margin:0 auto}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.mt-1{margin-top:var(--spacing-xs)}.mt-2{margin-top:var(--spacing-sm)}.mt-3{margin-top:var(--spacing-md)}.mt-4{margin-top:var(--spacing-lg)}.mb-1{margin-bottom:var(--spacing-xs)}.mb-2{margin-bottom:var(--spacing-sm)}.mb-3{margin-bottom:var(--spacing-md)}.mb-4{margin-bottom:var(--spacing-lg)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media print{.nav,.nav-toggle,.footer{display:none}body{color:#000;background:#fff}}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{background:radial-gradient(circle at 18% 8%, #1db95429, transparent 28rem), radial-gradient(circle at 84% 14%, #ff00001f, transparent 24rem), var(--clr-bg)}.spot-transfer-shell{width:min(1120px,100% - 2rem);min-height:100vh;color:var(--clr-light);margin:0 auto;padding:9rem 0 5rem}.spot-transfer-hero{max-width:780px;margin-bottom:2rem}.spot-transfer-kicker,.spot-eyebrow,.spot-card-heading p{color:#1db954;font-family:var(--ff-mono);letter-spacing:.18em;text-transform:uppercase;margin:0 0 .55rem;font-size:.75rem;font-weight:700}.spot-transfer-hero h1{font-family:var(--ff-primary);letter-spacing:-.07em;margin:0;font-size:clamp(2.6rem,7vw,5.75rem);line-height:.92}.spot-transfer-hero>p:last-child{max-width:650px;color:var(--clr-text-muted);margin:1.25rem 0 0;font-size:1.08rem;line-height:1.7}.spot-card{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(135deg,#ffffff13,#ffffff06),#06080cb8;border:1px solid #ffffff1a;border-radius:1.5rem;box-shadow:0 1.5rem 4rem #00000047}.spot-input-card{max-width:720px;padding:1.5rem}.spot-card-heading h2,.spot-playlist-copy h2,.spot-export-main h3{color:var(--clr-light);font-family:var(--ff-primary);letter-spacing:-.035em;margin:0}.spot-card-heading h2{font-size:clamp(1.65rem,4vw,2.4rem)}.spot-tabs{flex-wrap:wrap;gap:.65rem;margin:1.5rem 0;display:flex}.spot-tab,.spot-button{color:var(--clr-light);cursor:pointer;font:inherit;background:#ffffff0a;border:1px solid #ffffff29;border-radius:999px;font-weight:700;transition:transform .18s,border-color .18s,background .18s,color .18s}.spot-tab{padding:.65rem 1rem;font-size:.9rem}.spot-tab:hover,.spot-button:hover{border-color:#1db954a6;transform:translateY(-1px)}.spot-tab--active,.spot-button--primary{color:#041006;background:#1db954;border-color:#1db954}.spot-button{justify-content:center;align-items:center;gap:.45rem;padding:.8rem 1.15rem;display:inline-flex}.spot-button:disabled,.spot-tab:disabled{cursor:not-allowed;opacity:.52;transform:none}.spot-button--danger{color:#fff;background:#ff3838;border-color:#ff3838}.spot-button--secondary{background:#ffffff08}.spot-button--light{color:#171717;background:#fff;border-color:#0003}.spot-form{gap:1rem;display:grid}.spot-form label{color:var(--clr-text-muted);gap:.45rem;font-size:.92rem;display:grid}.spot-form input{width:100%;color:var(--clr-light);font:inherit;background:#00000042;border:1px solid #ffffff24;border-radius:1rem;outline:none;padding:.9rem 1rem}.spot-form input:focus{border-color:#1db954;box-shadow:0 0 0 3px #1db95429}.spot-upload label{cursor:pointer;text-align:center;background:#0003;border:1px dashed #ffffff3d;border-radius:1.25rem;place-items:center;min-height:13rem;display:grid}.spot-upload small,.spot-note{color:var(--clr-text-muted)}.spot-upload input{clip:rect(0, 0, 0, 0);width:1px;height:1px;position:absolute;overflow:hidden}.spot-camera{gap:1rem;display:grid}.spot-camera-frame{background:#000;border:1px solid #ffffff1f;border-radius:1rem;min-height:280px;overflow:hidden}.spot-camera-frame--idle{opacity:0;pointer-events:none;border-color:#0000;height:1px;min-height:0;overflow:hidden}.spot-file-scanner-host{opacity:0;pointer-events:none;clip:rect(0, 0, 0, 0);width:300px;min-height:300px;position:absolute;overflow:hidden}.spot-inline-error,.spot-error{color:#ffd5d5;background:#ff4d4d1f;border-color:#ff4d4d61}.spot-inline-error{border:1px solid #ff4d4d61;border-radius:1rem;margin:1rem 0 0;padding:.8rem 1rem}.spot-status,.spot-error{text-align:center;max-width:720px;margin-top:1rem;padding:1.2rem}.spot-playlist{gap:1rem;max-width:900px;display:grid}.spot-playlist .spot-status,.spot-playlist .spot-error{width:100%;max-width:none;margin-top:0}.spot-playlist-summary{grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:1.25rem;padding:1.25rem;display:grid}.spot-cover{width:10rem;height:10rem;color:var(--clr-text-muted);background:#ffffff14;border-radius:1rem;place-items:center;display:grid;overflow:hidden}.spot-cover img,.spot-track-cover img{object-fit:cover;width:100%;height:100%}.spot-playlist-copy h2{font-size:clamp(1.6rem,3.5vw,2.6rem)}.spot-playlist-copy>p:not(.spot-eyebrow){color:var(--clr-text-muted)}.spot-meta{color:var(--clr-text-muted);flex-wrap:wrap;gap:.7rem;font-size:.94rem;display:flex}.spot-meta a,.spot-share-actions a{color:#1ed760;font-weight:700;text-decoration:none}.spot-actions{gap:.65rem;display:grid}.spot-track-list{overflow:hidden}.spot-list-heading{color:var(--clr-text-muted);border-bottom:1px solid #ffffff14;padding:.95rem 1rem;font-weight:700}.spot-track-list-scroll,.spot-match-list{max-height:60vh;padding:.65rem;overflow-y:auto}.spot-track-row{color:inherit;border:1px solid #0000;border-radius:.95rem;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.65rem;text-decoration:none;transition:border-color .18s,background .18s;display:grid}.spot-track-row:hover{background:#ffffff0b;border-color:#ffffff1f}.spot-track-cover{width:3rem;height:3rem;color:var(--clr-text-muted);background:#ffffff14;border-radius:.55rem;place-items:center;display:grid;overflow:hidden}.spot-track-copy{min-width:0}.spot-track-copy p,.spot-match-row p{color:var(--clr-light);text-overflow:ellipsis;white-space:nowrap;margin:0;font-weight:700;overflow:hidden}.spot-track-copy small,.spot-match-row small,.spot-track-duration{color:var(--clr-text-muted)}.spot-track-duration{font-family:var(--ff-mono);font-size:.86rem}.spot-export-report{overflow:hidden}.spot-export-main{border-bottom:1px solid #ffffff14;gap:.85rem;padding:1.25rem;display:grid}.spot-export-main p{color:var(--clr-text-muted);margin:0}.spot-export-main strong,.spot-export-main span{color:var(--clr-light)}.spot-eyebrow--youtube{color:#ff3838}.spot-warning{background:#ffc5561f;border:1px solid #ffc55666;border-radius:.85rem;padding:.8rem;color:#ffe0a1!important}.spot-pager,.spot-qr-panel{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.spot-pager p{color:var(--clr-light);font-weight:700}.spot-qr-panel{color:#171717;background:#fff;border-radius:1rem;align-items:stretch;padding:1rem}.spot-qr-code{background:#fff;border-radius:.75rem;place-items:center;display:grid}.spot-share-actions{flex:1;gap:.75rem;min-width:0;display:grid}.spot-share-actions>div{flex-wrap:wrap;gap:1rem;display:flex}.spot-share-actions p{overflow-wrap:anywhere;color:#525252;font-size:.84rem}.spot-match-list{max-height:40vh}.spot-match-row{border-radius:.75rem;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.75rem;padding:.65rem;display:grid}.spot-badge{color:var(--clr-text-muted);background:#ffffff14;border-radius:999px;padding:.2rem .55rem;font-size:.75rem;font-weight:700}.spot-badge--found{color:#74f0a2;background:#1db95429}.spot-report-footer{border-top:1px solid #ffffff14;padding:.85rem 1.25rem}.spot-report-footer button{color:var(--clr-text-muted);cursor:pointer;font:inherit;background:0 0;border:0}@media (width<=760px){.spot-playlist-summary{grid-template-columns:1fr}.spot-cover{aspect-ratio:1;width:100%;max-width:13rem;height:auto}.spot-actions{grid-template-columns:1fr}}