:root{--color-primary: #ffffe3;--color-secondary: #ccccb6;--color-tertiary: #999988;--color-base: #0e0e10;--color-body: #1D1D21;--color-hover: #1e1e1e;--color-inactive: #30302a;--color-active: #ffffe3;--spacing-none: 0px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 24px;--spacing-xxl: 32px;--spacing-xxxl: 64px;--card-width-default: 540px;--card-height-default: 540px;--card-width-expanded: 1136px;--card-head-expanded: 352px;--card-body-expanded: 784px;--icon-size-default: 72px;--icon-size-small: 24px;--button-height: 64px;--header-height: 64px;--header-max-width: 1200px;--nav-link-width: 124px;--head-row-height: 16px;--head-title-height: 48px;--icon-height-small: 16px;--content-height-inactive: 154px;--content-height-active-min: 500px;--content-height-active-max: 800px;--head-animation-distance: 20px;--body-animation-distance: 20px;--border-radius-default: 8px;--border-radius-large: 16px;--transition-fast: all .3s ease;--transition-medium: all .5s ease;--transition-slow: all .8s ease;--font-family-title: "Satoshi", Helvetica, Arial, sans-serif;--font-family-body: "Satoshi", Helvetica, Arial, sans-serif;--font-family-subtitle: "SF Mono", Menlo, Monaco, Consolas, monospace;--font-size-title-xxl: 64px;--font-size-title-xl: 48px;--font-size-title-lg: 32px;--font-size-title-base: 24px;--font-size-title-sm: 20px;--font-size-subtitle: 14px;--font-size-body: 32px;--font-size-body-sm: 20px;--font-size-caption: 12px;--font-size-annotation-title: 14px;--font-size-annotation-subtitle: 10px;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-bold: 700}:root --text-style-title:{font-family:var(--font-family-title);font-size:var(--font-size-title-base);font-weight:var(--font-weight-medium);color:var(--color-primary);line-height:1.2}:root --text-style-subtitle:{font-family:var(--font-family-subtitle);font-size:var(--font-size-subtitle);font-weight:var(--font-weight-medium);color:var(--color-tertiary);line-height:1.2}@font-face{font-family:Lyno Jean;src:url(/assets/LynoJean.Df12jQDk.otf) format("opentype");font-weight:400;font-style:normal}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:var(--color-primary);background-color:var(--color-base);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh}h1,h2,h3,h4,h5,h6{line-height:1.2;margin-bottom:.5em;color:var(--color-primary)}p{margin-bottom:1em;color:var(--color-secondary)}a{font-weight:500;color:var(--color-primary);text-decoration:inherit}a:hover{color:var(--color-secondary)}button{border-radius:8px;border:1px solid var(--color-inactive);padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--color-base);color:var(--color-primary);cursor:pointer;transition:all .25s}button:hover{border-color:var(--color-primary);background-color:var(--color-hover)}button:focus,button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}@media (prefers-color-scheme: light){a:hover{color:#747bff}button{background-color:#f9f9f9}}.H1{font-family:Satoshi,Arial,Helvetica,sans-serif;font-size:64px;font-weight:700;line-height:1.1;letter-spacing:0;color:var(--color-active)}.H2{font-family:Satoshi,Arial,Helvetica,sans-serif;font-size:36px;font-weight:700;line-height:1.15;letter-spacing:0;color:var(--color-active)}.H3{font-family:Satoshi,Arial,Helvetica,sans-serif;font-size:24px;font-weight:700;line-height:1.2;letter-spacing:0;color:var(--color-active)}.B1{font-family:Satoshi,Arial,Helvetica,sans-serif;font-size:32px;font-weight:400;line-height:1.4;letter-spacing:0;color:var(--secondary)}.B2{font-family:Satoshi,Arial,Helvetica,sans-serif;font-size:20px;font-weight:400;line-height:1.5;letter-spacing:0;color:var(--secondary)}.S1{font-family:SF Mono,Menlo,Monaco,Consolas,monospace;font-size:14px;font-weight:400;letter-spacing:0;line-height:normal;color:var(--secondary)}.subtitle{font-family:var(--font-family-subtitle);font-size:var(--font-size-subtitle);font-weight:var(--font-weight-medium);color:var(--color-secondary);line-height:1.2}.app-container{max-width:1200px;margin:0 auto;padding:2rem;text-align:center}.page-container{width:100%;min-height:100vh}.header{position:fixed;top:0;left:50%;transform:translate(-50%);width:100%;max-width:var(--header-max-width, 1200px);height:var(--header-height, 64px);background:var(--color-base, #0e0e10);z-index:100;transition:position .2s ease,left .2s ease,transform .2s ease}.header.intro-mode{position:relative;left:0;transform:none;z-index:1}.header-content{height:100%;display:flex;align-items:center;position:relative;z-index:1;width:100%}.header-logo{height:100%;display:flex;align-items:center;justify-content:flex-start;border:1px solid var(--color-inactive, #30302a);padding:0 var(--spacing-xl, 32px);padding-left:24px;transition:var(--transition-fast, all .3s ease);position:relative;z-index:1;background:var(--color-base, #0e0e10);flex:1;color:var(--color-primary, #ffffe3)}.header.intro-mode .header-logo{background:var(--color-active, #ffffe3)}.header-logo.active{color:var(--color-base, #0e0e10)}.header-logo:hover{border-color:var(--color-primary, #ffffe3);z-index:2}.header-logo-svg{transition:color .3s ease;height:32px!important;width:auto!important;max-height:32px;display:block}.header-nav{height:100%;display:flex;align-items:center;position:relative;z-index:1;margin-left:-1px}.nav-link{width:var(--nav-link-width, 124px);font-family:var(--font-family-subtitle, "SF Mono, Menlo, Monaco, Consolas, monospace");font-size:var(--font-size-subtitle, 14px);color:var(--color-tertiary, #999988);text-decoration:none;transition:var(--transition-fast, all .3s ease);text-align:center;height:100%;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-inactive, #30302a);border-radius:0;position:relative;z-index:1;margin-left:-1px}.nav-link:first-child{margin-left:0}.nav-link:last-child{border-right:1px solid var(--color-inactive, #30302a)}button.nav-link{background:var(--color-base, #0e0e10)}.nav-link:hover{color:var(--color-primary, #ffffe3);border-color:var(--color-primary, #ffffe3);z-index:2}.nav-link.active{color:var(--color-primary, #ffffe3);border-color:var(--color-primary, #ffffe3);background:var(--color-primary, #ffffe3);color:var(--color-base, #0e0e10);z-index:2}.nav-link:last-child:hover{border-color:var(--color-active)}.intro-animation{width:100%;min-height:100vh;display:flex;justify-content:center;align-items:center;background:#000}.view-container{border:2px solid var(--color-active, #ffffff);background:var(--color-base, #1a1a1a);overflow:hidden;position:relative;transition:transform .8s cubic-bezier(.4,0,.2,1)}.view-container.exiting{transform:translateY(-100vh)}.intro-content{width:100%;height:1264px;position:relative;transition:transform .8s cubic-bezier(.4,0,.2,1)}.intro1-section{width:100%;height:600px;display:grid;grid-template-columns:repeat(8,150px);grid-template-rows:repeat(4,150px);gap:0}.grid-cell{background:var(--color-base, #1a1a1a);border:none;display:flex;align-items:center;justify-content:center;color:#ffffff80;font-size:14px;text-align:center;padding:8px}.svg-cell{grid-column:1 / 4;grid-row:1;background:var(--color-active, #ffffe3);border-right:1px solid var(--color-inactive, rgba(255, 255, 255, .2));border-bottom:1px solid var(--color-inactive, rgba(255, 255, 255, .2));transition:var(--transition-fast, all .3s ease);cursor:pointer;padding:20px}.svg-cell:hover{background:var(--color-secondary, #ccccb6);z-index:10}.svg-cell:hover .layer-face-2{transform:rotate(180deg)}.text-r1{grid-column:4 / 9;grid-row:1;border-bottom:1px solid var(--color-inactive, rgba(255, 255, 255, .2));font-family:var(--font-family-title);font-size:var(--font-size-title-xxl);font-weight:var(--font-weight-medium);color:var(--color-active, #ffffff);transition:var(--transition-fast, all .3s ease);cursor:pointer}.text-r1:hover{background:var(--color-hover, #1e1e1e);z-index:10}.text-r2{grid-column:1 / 5;grid-row:2;border-right:1px solid var(--color-inactive, rgba(255, 255, 255, .2));border-bottom:1px solid var(--color-inactive, rgba(255, 255, 255, .2));font-family:var(--font-family-title);font-size:var(--font-size-title-xxl);font-weight:var(--font-weight-medium);color:var(--color-active, #ffffff);transition:var(--transition-fast, all .3s ease);cursor:pointer;position:relative;overflow:hidden}.intro1-section .text-r2>span{display:block;transition:transform .3s ease}.text-r2:hover{background:var(--color-hover, #1e1e1e);z-index:10}.intro1-section .text-r2:hover>span{transform:translateY(-24px)}.text-r2 .carousel{position:absolute;bottom:-48px;left:0;width:100%;height:48px;background:var(--color-base, #0e0e10);border-top:1px solid var(--color-inactive, rgba(255, 255, 255, .2));font-family:var(--font-family-subtitle);font-size:var(--font-size-subtitle);font-weight:var(--font-weight-medium);color:var(--color-secondary, #ccccb6);line-height:1.2;transition:transform .3s ease;overflow:hidden;display:flex;align-items:center;z-index:5}.text-r2:hover .carousel{transform:translateY(-48px)}.text-r2 .carousel-content{display:flex;gap:80px;animation:scroll-left 40s linear infinite;white-space:nowrap}.text-r2 .carousel-content span{flex-shrink:0}@keyframes scroll-left{0%{transform:translate(0)}to{transform:translate(-50%)}}.blank-r2-c5{grid-column:5 / 6;grid-row:2;background:var(--color-base, #1a1a1a);border-right:1px solid var(--color-inactive, rgba(255, 255, 255, .2));border-bottom:1px solid var(--color-inactive, rgba(255, 255, 255, .2));transition:var(--transition-fast, all .3s ease);cursor:pointer;position:relative}.blank-r2-c5:hover{background:#e97451;z-index:10}#Circles{display:flex;align-items:center;justify-content:center}#Circles .circle{position:absolute;width:64px;height:64px;border-radius:50%;border:2px solid var(--color-inactive);background:transparent;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;transition:border-color .3s ease;animation-fill-mode:forwards}.blank-r2-c5:hover #Circles .circle{border-color:#fff8e7}#Circles .circle-tl{top:17px;left:17px}.blank-r2-c5:hover .circle-tl{animation:circle1Rotate 3.2s infinite ease-in-out}#Circles .circle-tr{top:17px;left:69px}.blank-r2-c5:hover .circle-tr{animation:circle2Rotate 3.2s infinite ease-in-out}#Circles .circle-br{top:69px;left:69px}.blank-r2-c5:hover .circle-br{animation:circle3Rotate 3.2s infinite ease-in-out}#Circles .circle-bl{top:69px;left:17px}.blank-r2-c5:hover .circle-bl{animation:circle4Rotate 3.2s infinite ease-in-out}@keyframes circle1Rotate{0%,6.25%{top:17px;left:17px}25%,31.25%{top:17px;left:69px}50%,56.25%{top:69px;left:69px}75%,81.25%{top:69px;left:17px}to{top:17px;left:17px}}@keyframes circle2Rotate{0%,6.25%{top:17px;left:69px}25%,31.25%{top:69px;left:69px}50%,56.25%{top:69px;left:17px}75%,81.25%{top:17px;left:17px}to{top:17px;left:69px}}@keyframes circle3Rotate{0%,6.25%{top:69px;left:69px}25%,31.25%{top:69px;left:17px}50%,56.25%{top:17px;left:17px}75%,81.25%{top:17px;left:69px}to{top:69px;left:69px}}@keyframes circle4Rotate{0%,6.25%{top:69px;left:17px}25%,31.25%{top:17px;left:17px}50%,56.25%{top:17px;left:69px}75%,81.25%{top:69px;left:69px}to{top:69px;left:17px}}.image-cell{grid-column:6 / 9;grid-row:2 / 4;border-bottom:1px solid var(--color-inactive, rgba(255, 255, 255, .2));transition:var(--transition-fast, all .3s ease);cursor:pointer;padding:0;overflow:hidden}.image-cell:hover{background:var(--color-hover, #1e1e1e);z-index:10}.image-cell .nick-image{width:100%;height:100%;object-fit:cover;display:block}.blank-r3-c1{grid-column:1 / 2;grid-row:3;background:var(--color-base, #1a1a1a);border-right:1px solid var(--color-inactive, rgba(255, 255, 255, .2));border-bottom:1px solid var(--color-inactive, rgba(255, 255, 255, .2));transition:var(--transition-fast, all .3s ease);cursor:pointer;position:relative;overflow:hidden}.blank-r3-c1:hover{background:#0080ff;z-index:10}.blank-r3-c1:hover .rectangle{border-color:gold}.blank-r3-c1 .rectangle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:transparent;border:2px solid var(--color-inactive, rgba(255, 255, 255, .2));box-sizing:border-box}.blank-r3-c1 .rect-0{width:6.4px;height:4px}.blank-r3-c1 .rect-1{width:28.128px;height:17.58px}.blank-r3-c1 .rect-2{width:56.257px;height:35.16px}.blank-r3-c1 .rect-3{width:84.385px;height:52.741px}.blank-r3-c1 .rect-4{width:126.578px;height:79.111px}.blank-r3-c1 .rect-5{width:189.867px;height:118.667px}.blank-r3-c1 .rect-6{width:284.8px;height:178px}.blank-r3-c1:hover .rect-0{animation:rectAnim0 3.33s infinite linear}.blank-r3-c1:hover .rect-1{animation:rectAnim1 3.33s infinite linear}.blank-r3-c1:hover .rect-2{animation:rectAnim2 3.33s infinite linear}.blank-r3-c1:hover .rect-3{animation:rectAnim3 3.33s infinite linear}.blank-r3-c1:hover .rect-4{animation:rectAnim4 3.33s infinite linear}.blank-r3-c1:hover .rect-5{animation:rectAnim5 3.33s infinite linear}.blank-r3-c1:hover .rect-6{animation:rectAnim6 3.33s infinite linear}@keyframes rectAnim0{0%{width:6.4px;height:4px;opacity:1}85%{width:6.4px;height:4px;opacity:1}90%{width:6.4px;height:4px;opacity:0}90.01%{width:284.8px;height:178px;opacity:0}95%{width:284.8px;height:178px;opacity:1}to{width:189.867px;height:118.667px;opacity:1}}@keyframes rectAnim1{0%{width:28.128px;height:17.58px;opacity:1}to{width:6.4px;height:4px;opacity:1}}@keyframes rectAnim2{0%{width:56.257px;height:35.16px;opacity:1}to{width:28.128px;height:17.58px;opacity:1}}@keyframes rectAnim3{0%{width:84.385px;height:52.741px;opacity:1}to{width:56.257px;height:35.16px;opacity:1}}@keyframes rectAnim4{0%{width:126.578px;height:79.111px;opacity:1}to{width:84.385px;height:52.741px;opacity:1}}@keyframes rectAnim5{0%{width:189.867px;height:118.667px;opacity:1}to{width:126.578px;height:79.111px;opacity:1}}@keyframes rectAnim6{0%{width:284.8px;height:178px;opacity:1}to{width:189.867px;height:118.667px;opacity:1}}.text-r3{grid-column:2 / 6;grid-row:3;border-right:1px solid var(--color-inactive, rgba(255, 255, 255, .2));border-bottom:1px solid var(--color-inactive, rgba(255, 255, 255, .2));font-family:var(--font-family-title);font-size:var(--font-size-title-xxl);font-weight:var(--font-weight-medium);color:var(--color-active, #ffffff);transition:var(--transition-fast, all .3s ease);cursor:pointer;overflow:hidden}.text-r3:hover{background:var(--color-hover, #1e1e1e);z-index:10}.text-r3 .asterisk{display:inline-block;transition:transform .3s ease;transform-origin:center center}.text-r3:hover .asterisk{transform:rotate(360deg)}.text-r3-content{display:flex;flex-direction:column;align-items:center;position:relative;width:100%}.text-r3-content>span:first-child{transition:transform .3s ease}.text-r3:hover .text-r3-content>span:first-child{transform:translateY(-16px)}.text-r3 .subtitle-text{font-family:var(--font-family-subtitle);font-size:var(--font-size-subtitle);font-weight:var(--font-weight-medium);color:var(--color-secondary);line-height:1.2;opacity:0;transition:opacity .3s ease,bottom .3s ease;position:absolute;bottom:-50px;left:50%;transform:translate(-50%);white-space:nowrap;text-align:center}.text-r3:hover .subtitle-text{opacity:1;bottom:-14px}.text-r4{grid-column:1 / 7;grid-row:4;border-right:1px solid var(--color-inactive, rgba(255, 255, 255, .2));font-family:var(--font-family-title);font-size:var(--font-size-title-xxl);font-weight:var(--font-weight-medium);color:var(--color-active, #ffffff);transition:var(--transition-fast, all .3s ease);cursor:pointer}.text-r4:hover{background:var(--color-hover, #1e1e1e);z-index:10}.text-r4-content{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;width:100%;position:relative}.text-r4-main{display:flex;align-items:center;gap:0;transition:transform .3s ease;align-self:center;color:var(--color-active, #ffffe3)}.text-r4:hover .text-r4-main{transform:translateY(-16px)}.intro1-section .text-prefix{position:relative;height:78px;width:466px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--color-active, #ffffe3)}.intro1-section .text-prefix p{margin:0;white-space:nowrap;color:inherit}.text-island-container{position:relative;width:245px;height:78px;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:width .3s ease,padding .3s ease}.text-r4:hover .text-island-container{width:213px;padding:0 16px}.text-island{position:absolute;white-space:nowrap;transition:transform .3s ease;left:50%;transform:translate(-50%);color:var(--color-active, #ffffe3)}.text-island:first-child{top:50%;transform:translate(-50%,-50%)}.text-island:last-child{top:50%;transform:translate(-50%,calc(-50% + 76px))}.text-r4:hover .text-island:first-child{transform:translate(-50%,-150%)}.text-r4:hover .text-island:last-child{transform:translate(-50%,-50%)}.text-r4-subtitle{font-family:SF Mono,Monaco,Courier New,monospace;font-size:14px;font-weight:400;color:#998;margin:0;position:absolute;bottom:-50px;left:50%;transform:translate(-50%);transition:bottom .3s ease,opacity .3s ease;opacity:0;white-space:nowrap;align-self:center}.text-r4:hover .text-r4-subtitle{opacity:1;bottom:-14px}.blank-r4-c7{grid-column:7 / 8;grid-row:4;background:var(--color-base, #0e0e10);border-right:1px solid var(--color-inactive, rgba(255, 255, 255, .2));transition:var(--transition-fast, all .3s ease);cursor:pointer;position:relative}.blank-r4-c7:hover{background:var(--color-base, #0e0e10);z-index:10}.laptop-icon{position:absolute;left:21px;top:17px;width:108px;height:115px}.laptop-screen{fill:var(--color-base, #0e0e10);transition:fill .3s ease}.blank-r4-c7:hover .laptop-screen{fill:#86d5ff}.laptop-screen-island,.laptop-screen-sun{opacity:0;transform:translateY(60px);transition:opacity .4s ease,transform .4s ease}.blank-r4-c7:hover .laptop-screen-island,.blank-r4-c7:hover .laptop-screen-sun{opacity:1;transform:translateY(0)}.laptop-path{fill:var(--color-inactive, #30302a);transition:fill .3s ease}.blank-r4-c7:hover .laptop-path{fill:var(--color-active, #ffffe3)}.blank-r4-c8{grid-column:8 / 9;grid-row:4;background:var(--color-active, #ffffe3)}.blank-r4-c8.clickable{cursor:pointer;transition:background-color .3s ease,border-color .3s ease,color .3s ease;border:1px solid var(--color-inactive, rgba(255, 255, 255, .2));font-size:24px;color:var(--color-base, #0e0e10)}.blank-r4-c8.clickable:hover{background-color:var(--color-secondary, #ccccb6);z-index:10}.blank-r4-c8.clickable:active{background-color:var(--color-tertiary, #999988)}.layered-logo{display:inline-flex;align-items:center;justify-content:center;aspect-ratio:88 / 56}.logo-layer{position:absolute;pointer-events:none}.layer-base{top:0;left:0;color:var(--color-base)}.layer-outline{top:7.14%;left:4.55%;color:var(--color-primary)}.layer-face-1{top:21.43%;left:50%}.layer-face-1 .face-1-bg{color:var(--color-base)}.layer-face-1 .face-1-features{color:var(--color-primary)}.layer-face-2{top:21.43%;left:13.64%;transition:transform .3s ease}.layer-face-2 .face-2-bg{color:var(--color-primary)}.layer-face-2 .face-2-features{color:var(--color-base)}.intro2-section{width:1200px;height:600px;display:grid;grid-template-columns:repeat(8,150px);grid-template-rows:repeat(4,150px);gap:0}.intro2-section .grid-cell{background:var(--color-base, #1a1a1a);display:flex;align-items:center;justify-content:center;color:#ffffff80;font-size:14px;text-align:center;padding:8px;overflow:hidden}.intro2-section .text-r1{grid-column:1 / 6;grid-row:1;border-right:1px solid var(--color-inactive, rgba(255, 255, 255, .2));border-bottom:1px solid var(--color-inactive, rgba(255, 255, 255, .2));font-family:var(--font-family-title);font-size:var(--font-size-title-xxl);font-weight:var(--font-weight-medium);color:var(--color-active, #ffffff);transition:background .3s ease;cursor:pointer;overflow:hidden;position:relative}.intro2-section .text-r1:hover{background:var(--color-hover, #1e1e1e);z-index:10}.intro2-section .text-r1 .text-r1-text{margin:0;font-family:var(--font-family-title);font-size:var(--font-size-title-xxl);font-weight:var(--font-weight-medium);color:var(--color-active, #ffffff);line-height:normal;position:relative;z-index:1}.intro2-section .text-r1 .artboard-frame{position:absolute;left:24px;top:24px;width:20px;height:16px;opacity:0;transition:width .5s ease,height .5s ease,opacity 0s ease .5s}.intro2-section .text-r1:hover .artboard-frame{width:694px;height:111px;opacity:1;transition:width .5s ease,height .5s ease,opacity 0s ease}.intro2-section .text-r1 .artboard-border{position:absolute;left:8px;top:1px;width:4px;height:4px;border:1px solid #0c8ce9;transition:width .5s ease,height .5s ease}.intro2-section .text-r1:hover .artboard-border{width:686px;height:100px}.intro2-section .text-r1 .corner-point{position:absolute;width:2px;height:2px;background:#fff;transition:left .5s ease,right .5s ease,top .5s ease,bottom .5s ease}.intro2-section .text-r1 .artboard-frame .point-tl{left:7px;top:0}.intro2-section .text-r1 .artboard-frame .point-tr{left:11px;top:0}.intro2-section .text-r1:hover .artboard-frame .point-tr{left:auto;right:-1px}.intro2-section .text-r1 .artboard-frame .point-bl{left:7px;top:4px}.intro2-section .text-r1:hover .artboard-frame .point-bl{top:100px}.intro2-section .text-r1 .artboard-frame .point-br{left:11px;top:4px}.intro2-section .text-r1:hover .artboard-frame .point-br{left:auto;right:-1px;top:100px}.intro2-section .text-r1 .dimension-label{position:absolute;left:50%;top:8px;transform:translate(-50%);background:#0c8ce9;padding:2px;display:flex;align-items:center;justify-content:center;transition:top .5s ease}.intro2-section .text-r1:hover .dimension-label{top:104px}.intro2-section .text-r1 .dimension-text,.intro2-section .text-r1 .dimension-text-hover{font-family:Inter,sans-serif;font-weight:500;font-size:6px;color:#fff;line-height:normal;white-space:nowrap}.intro2-section .text-r1 .dimension-text{display:block}.intro2-section .text-r1 .dimension-text-hover,.intro2-section .text-r1:hover .dimension-text{display:none}.intro2-section .text-r1:hover .dimension-text-hover{display:block}.intro2-section .blank-r1-c6{grid-column:6 / 7;grid-row:1;background:var(--color-base, #1a1a1a);border-right:1px solid var(--color-inactive, rgba(255, 255, 255, .2));border-bottom:1px solid var(--color-inactive, rgba(255, 255, 255, .2));transition:var(--transition-fast, all .3s ease);cursor:pointer}.intro2-section .blank-r1-c6:hover{background:var(--color-hover, #1e1e1e);z-index:10}.intro2-section .image-r1r2{grid-column:7 / 9;grid-row:1 / 3;border-bottom:1px solid var(--color-inactive, rgba(255, 255, 255, .2));transition:var(--transition-fast, all .3s ease);cursor:pointer}.intro2-section .image-r1r2:hover{background:var(--color-hover, #1e1e1e);z-index:10}.intro2-section .blank-r2-c1{grid-column:1 / 2;grid-row:2;background:var(--color-base, #1a1a1a);border-right:1px solid var(--color-inactive, rgba(255, 255, 255, .2));border-bottom:1px solid var(--color-inactive, rgba(255, 255, 255, .2));transition:var(--transition-fast, all .3s ease);cursor:pointer}.intro2-section .blank-r2-c1:hover{background:var(--color-hover, #1e1e1e);z-index:10}.intro2-section .blank-r2-c2{grid-column:2 / 3;grid-row:2;background:var(--color-base, #1a1a1a);border-right:1px solid var(--color-inactive, rgba(255, 255, 255, .2));border-bottom:1px solid var(--color-inactive, rgba(255, 255, 255, .2));transition:var(--transition-fast, all .3s ease);cursor:pointer}.intro2-section .blank-r2-c2:hover{background:var(--color-hover, #1e1e1e);z-index:10}.intro2-section .text-r2{grid-column:3 / 7;grid-row:2;border-right:1px solid var(--color-inactive, rgba(255, 255, 255, .2));border-bottom:1px solid var(--color-inactive, rgba(255, 255, 255, .2));font-family:var(--font-family-title);font-size:var(--font-size-title-xxl);font-weight:var(--font-weight-medium);color:var(--color-active, #ffffff);cursor:pointer;position:relative;overflow:hidden}.intro2-section .text-r2:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,#ed0000,#f23204,#fec10f,#fddb0f,#04dbba,#0059ce,#ed0000 120%);background-size:200% 100%;opacity:0;z-index:-1;animation:gradientWave 8s ease-in-out infinite;filter:contrast(120%) brightness(110%) url(#grainNoise);transition:opacity .4s ease}.intro2-section .text-r2:hover:before,.intro2-section .text-r2:has(.char:hover):before{opacity:1}.intro2-section .text-r2:hover{color:var(--color-base)}@keyframes gradientWave{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.intro2-section .text-r2 .char{display:inline-block;font-family:var(--font-family-title);transition:font-family .3s ease,padding .3s ease;cursor:pointer}.intro2-section .text-r2 .char:hover{font-family:"Lyno Jean",var(--font-family-title)}.intro2-section .text-r2 .space{display:inline;pointer-events:none;white-space:pre}.intro2-section .blank-r3-c1{grid-column:1 / 2;grid-row:3;background:var(--color-active, #ffffe3);border-right:1px solid var(--color-inactive, rgba(255, 255, 255, .2));border-bottom:1px solid var(--color-inactive, rgba(255, 255, 255, .2));color:var(--color-base, #0e0e10);font-family:var(--font-family-title);font-size:var(--font-size-title-xxl);font-weight:var(--font-weight-medium);transition:var(--transition-fast, all .3s ease);cursor:pointer}.intro2-section .blank-r3-c1:hover{background:var(--color-secondary, #ccccb6);z-index:10}.intro2-section .text-r3{grid-column:2 / 7;grid-row:3;border-right:1px solid var(--color-inactive, rgba(255, 255, 255, .2));border-bottom:1px solid var(--color-inactive, rgba(255, 255, 255, .2));font-family:var(--font-family-title);font-size:var(--font-size-title-xxl);font-weight:var(--font-weight-medium);color:var(--color-active, #ffffff);transition:var(--transition-fast, all .3s ease);cursor:pointer;overflow:hidden}.intro2-section .text-r3:hover{background:var(--color-hover, #1e1e1e);z-index:10}.intro2-section .text-r3 .text-r3-content{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;width:100%;height:100%}.intro2-section .text-r3 .music-default-text{transition:transform .3s ease}.intro2-section .text-r3:hover .music-default-text{transform:translateY(-16px)}.intro2-section .text-r3 .music-now-playing{position:absolute;bottom:-50px;opacity:0;transition:bottom .3s ease,opacity .3s ease;text-align:center;font-family:var(--font-family-subtitle);font-size:var(--font-size-subtitle);font-weight:var(--font-weight-medium);color:var(--color-tertiary)}.intro2-section .text-r3:hover .music-now-playing{bottom:6px;opacity:1}.intro2-section .blank-r3-c7{grid-column:7 / 8;grid-row:3;background:var(--color-base, #1a1a1a);border-right:1px solid var(--color-inactive, rgba(255, 255, 255, .2));border-bottom:1px solid var(--color-inactive, rgba(255, 255, 255, .2));transition:var(--transition-fast, all .3s ease);cursor:pointer}.intro2-section .blank-r3-c7:hover{background:var(--color-hover, #1e1e1e);z-index:10}#Album1{padding:0;position:relative}#Album1 .record{position:absolute;width:116px;height:116px;border-radius:50%;background:var(--color-inactive, rgba(255, 255, 255, .3));top:0;left:50%;transform:translate(-50%);transition:transform .3s ease;z-index:1}#Album1:hover .record{transform:translate(-50%) translateY(24px);transition-delay:.3s}#Album1 .album-image{width:100%;height:100%;background:var(--color-inactive, rgba(255, 255, 255, .1));transition:transform .3s ease;transform-origin:center;position:relative;z-index:2;transition-delay:.3s}#Album1:hover .album-image{transform:scale(.83) translateY(-24px);transition-delay:0s}#Album1 .album-image img{width:100%;height:100%;object-fit:cover;display:block}#Album1 .album-placeholder{width:100%;height:100%;background:var(--color-inactive, rgba(255, 255, 255, .1))}.intro2-section .blank-r3-c8{grid-column:8 / 9;grid-row:3;background:var(--color-base, #1a1a1a);border-bottom:1px solid var(--color-inactive, rgba(255, 255, 255, .2));transition:var(--transition-fast, all .3s ease);cursor:pointer}.intro2-section .blank-r3-c8:hover{background:var(--color-hover, #1e1e1e);z-index:10}.intro2-section .blank-r4-c1{grid-column:1 / 2;grid-row:4;background:var(--color-base, #1a1a1a);border-right:1px solid var(--color-inactive, rgba(255, 255, 255, .2));transition:var(--transition-fast, all .3s ease);cursor:pointer}.intro2-section .blank-r4-c1:hover{background:var(--color-hover, #1e1e1e);z-index:10}.intro2-section .blank-r4-c2{grid-column:2 / 3;grid-row:4;background:var(--color-base, #1a1a1a);border-right:1px solid var(--color-inactive, rgba(255, 255, 255, .2));transition:var(--transition-fast, all .3s ease);cursor:pointer}.intro2-section .blank-r4-c2:hover{background:var(--color-hover, #1e1e1e);z-index:10}.intro2-section .blank-r4-c3{grid-column:3 / 4;grid-row:4;background:var(--color-base, #1a1a1a);border-right:1px solid var(--color-inactive, rgba(255, 255, 255, .2));transition:var(--transition-fast, all .3s ease);cursor:pointer}.intro2-section .blank-r4-c3:hover{background:var(--color-hover, #1e1e1e);z-index:10}.intro2-section .text-r4{grid-column:4 / 9;grid-row:4;font-family:var(--font-family-title);font-size:var(--font-size-title-xxl);font-weight:var(--font-weight-medium);color:var(--color-active, #ffffff);transition:var(--transition-fast, all .3s ease);cursor:pointer;display:flex;align-items:center;justify-content:center;white-space:nowrap;padding-left:40px;position:relative}#Location .clouds-back{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;overflow:hidden}#Location .clouds-back .cloud{position:absolute;opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}#Location:hover .clouds-back .cloud{opacity:.8;transform:translateY(0)}#Location .clouds-back .cloud-1{top:18.55px;left:535.53px;width:171.4px;height:68.204px}#Location .clouds-back .cloud-2{top:30px;left:140px;width:141.46px;height:55.68px}#Location .clouds-front{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;overflow:hidden}#Location .clouds-front .cloud{position:absolute;opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}#Location:hover .clouds-front .cloud{opacity:.8;transform:translateY(0)}#Location .clouds-front .cloud-1{top:76px;left:45px;width:89.022px;height:35.04px}#Location .clouds-front .cloud-2{top:78.67px;left:262px;width:116.805px;height:46.29px}#Location .clouds-front .cloud-3{top:80px;left:436px;width:89.022px;height:35.04px}.intro2-section .text-r4 .text{display:flex;gap:24px;position:relative;z-index:1;transition:gap .3s ease}.intro2-section .text-r4:hover .text{gap:0}.intro2-section .text-r4 .text-prefix{opacity:1;width:fit-content;flex-shrink:0;transition:opacity .3s ease,width .3s ease}.intro2-section .text-r4 .text-location{width:fit-content;transition:all .3s ease}.intro2-section .text-r4:hover{background:#07f;color:#000;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,SF Pro Text,system-ui,sans-serif;z-index:10}.intro2-section .text-r4:hover .text-prefix{opacity:0;width:0;overflow:hidden}.intro2-section .text-r4:hover .text-location{font-weight:900;font-stretch:expanded}.icon-img-swap-cell{position:relative;overflow:hidden;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.swap-icon{transition:opacity .3s ease,transform .3s ease;opacity:1;transform:translateY(0)}.swap-icon.hidden{opacity:0;transform:translateY(-20px)}.swap-image{position:absolute;top:24px;left:24px;right:24px;bottom:24px;width:calc(100% - 48px);height:calc(100% - 48px);object-fit:contain;opacity:0;transform:translateY(20px);transition:opacity .3s ease,transform .3s ease,top .4s ease,left .4s ease,right .4s ease,bottom .4s ease,width .4s ease,height .4s ease;pointer-events:none}.swap-image.visible{opacity:1;transform:translateY(0)}.swap-image.scaled{top:4px;left:4px;right:4px;bottom:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:cover}.content-navigator{max-width:1200px;width:100%;margin:0 auto 32px;position:sticky;top:32px;display:flex;flex-direction:column;height:calc(100vh - 64px);max-height:calc(100vh - 64px);z-index:2;overflow:hidden}.tab-nav{flex-shrink:0;z-index:10;position:relative;background:#0e0e10;border-bottom:1px solid #30302a}.content{flex:1;width:100%;display:flex;flex-direction:column;border:1px solid var(--color-active);background:var(--color-base);overflow-y:auto;overflow-x:hidden;position:relative;z-index:1;min-height:120px}.content::-webkit-scrollbar{width:2px}.content::-webkit-scrollbar-track{background:transparent}.content::-webkit-scrollbar-thumb{background:var(--color-primary)}.content::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}.content-navigator-button-container{width:100%;display:flex;align-items:center;justify-content:center;padding:0;margin:0}.content-navigator-button{width:100%;height:64px;background:var(--color-base);border:1px solid var(--color-active);border-left-width:0;border-radius:0;color:var(--color-primary);display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);cursor:pointer;transition:var(--transition-fast);font-family:var(--font-family-subtitle);font-size:var(--font-size-subtitle);font-weight:var(--font-weight-medium);padding:0;margin:0}.content-navigator-button-container:first-child .content-navigator-button{border-left-width:1px}.content-navigator-button:hover{background:var(--color-hover);border-color:var(--color-active);color:var(--color-active)}.content-navigator-button:hover .content-navigator-button-icon{color:var(--color-active)}.content-navigator-button-index{font-family:var(--font-family-subtitle);font-size:var(--font-size-subtitle);font-weight:var(--font-weight-medium);color:var(--color-tertiary);margin:0;padding:0;margin-right:var(--spacing-md)}.content-navigator-button-text{margin:0;padding:0}.content-navigator-button-icon{color:var(--color-tertiary);transition:var(--transition-fast)}.content-navigator-button-back .content-navigator-button-icon{transform:rotate(180deg)}.content-navigator-button-up{width:64px;min-width:64px;flex:none;background:var(--color-primary)}.content-navigator-button-up .content-navigator-button-icon{transform:rotate(180deg);color:var(--color-base)}.content-navigator-button-up:hover{background:var(--color-active)}.content-navigator-button-up:hover .content-navigator-button-icon{color:var(--color-base)}@media (max-width: 768px){.content-navigator{padding:0 12px}}@media (max-width: 480px){.content-navigator{padding:0 8px}}.tab-nav{width:100%;display:flex;align-items:center;justify-content:flex-start;gap:0;border-radius:0;box-sizing:border-box;overflow:hidden;position:relative;z-index:10;flex-shrink:0}.nav-tab-item{flex:1 1 0;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;text-align:center;padding:var(--spacing-lg, 16px);background:var(--color-base, #0e0e10);color:var(--color-secondary, #ccccb6);cursor:pointer;transition:var(--transition-fast, all .3s ease);margin:0!important;box-sizing:border-box;min-width:0;border:1px solid var(--color-inactive, #30302a);z-index:1;position:relative;min-height:60px}.nav-tab-item.active{background:var(--color-primary, #ffffe3)!important;border:1px solid var(--color-primary, #ffffe3)!important;z-index:10}.nav-tab-item.active .navtab-item-title,.nav-tab-item.active .navtab-item-top span{color:var(--color-base, #0e0e10)!important}.nav-tab-item:hover,.nav-tab-item:focus{z-index:20}.navtab-item-top{height:var(--icon-height-small, 16px);display:flex;align-items:center;justify-content:flex-start;width:100%}.navtab-item-title{height:var(--head-row-height, 16px);display:flex;align-items:center;justify-content:center;width:100%;font-size:var(--font-size-body-xs, 16px);font-family:inherit;color:var(--color-primary, #ffffe3)}.navtab-item-bottom{height:var(--icon-height-small, 16px);display:flex;align-items:center;justify-content:flex-end;width:100%}.navtab-eye-svg{height:var(--icon-height-small, 16px);width:auto;transition:var(--transition-fast, all .3s ease);opacity:.7}.navtab-eye-svg svg{height:var(--icon-height-small, 16px);width:var(--icon-height-small, 16px);display:block}.nav-tab-item.active .navtab-eye-svg{opacity:1;filter:none}.navtab-item-top span,.navtab-item-bottom svg{color:var(--color-secondary, #ccccb6);fill:var(--color-secondary, #ccccb6);transition:var(--transition-fast, all .3s ease)}.nav-tab-item.active .navtab-item-top span,.nav-tab-item.active .navtab-item-bottom svg{color:var(--color-base, #0e0e10);fill:var(--color-base, #0e0e10)}.nav-tab-item:hover{border-color:var(--color-primary, #ffffe3);color:var(--color-primary, #ffffe3)}.head{width:100%;padding:var(--spacing-xl, 24px);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--spacing-md, 12px);background:var(--color-base, #0e0e10)}.head-top,.head-bottom{height:var(--head-row-height, 16px);min-height:var(--head-row-height, 16px);max-height:var(--head-row-height, 16px);width:100%;display:flex;align-items:center;justify-content:space-between}.head-title{height:var(--head-title-height, 48px);width:100%;display:flex;align-items:center;justify-content:flex-start;padding-left:var(--spacing-lg, 16px)}.head-title span{display:block;width:100%;text-align:left}.head-text-title{font-family:var(--font-family-title);font-size:var(--font-size-title-base);font-weight:var(--font-weight-medium);color:var(--color-primary);line-height:1.2}.head-text-subtitle{font-family:var(--font-family-subtitle);font-size:var(--font-size-subtitle);font-weight:var(--font-weight-medium);color:var(--color-tertiary);line-height:1.2}.head-icon-wrapper{width:var(--icon-size-small, 24px);height:var(--icon-height-small, 16px);display:flex;align-items:center;justify-content:center}.head-icon{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--color-tertiary, #999988)}.head-icon-svg{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.head-icon-svg svg{width:100%;height:100%}.head-icon-img{width:100%;height:100%;object-fit:contain}.body{padding:var(--spacing-xl) var(--spacing-xl) 48px var(--spacing-xl);display:flex;flex-direction:column;gap:var(--spacing-xl)}.body-component{width:100%;max-width:100%;display:grid;gap:16px;height:fit-content}.break-line{width:100%;height:1px;background-color:var(--color-inactive);margin:24px 0;opacity:.5}.break-line.thin{height:1px;margin:16px 0}.break-line.thick{height:2px;margin:32px 0}.break-line.active{background-color:var(--color-active);opacity:1}.body-component.break-line{width:100%;height:1px;background-color:var(--color-inactive);margin:24px 0;opacity:.5}.body-component.break-line.thin{height:1px;margin:16px 0}.body-component.break-line.thick{height:2px;margin:32px 0}.body-component.break-line.active{background-color:var(--color-active);opacity:1}.card-group{display:flex;gap:24px;justify-content:flex-start;position:relative}.text-component-wrapper{width:100%;display:flex;flex-direction:column;gap:var(--spacing-sm)}.text-subtitle{margin:0;padding:0;margin-bottom:0!important}.text-component{width:100%;height:fit-content;margin:0;padding:0;margin-bottom:0!important}.title-section{display:flex;flex-direction:column;gap:16px;width:100%;max-width:1200px;margin:var(--spacing-xl) auto 0}.title-section-head{display:flex;flex-direction:column}.title-section-title{font-size:var(--font-size-title-base);font-weight:var(--font-weight-bold);margin:0 0 var(--spacing-sm) 0}.title-section-body{display:flex;flex-direction:row;gap:16px}.work-item-root{width:100%;min-width:0;max-width:100%;display:flex;flex-direction:column;align-items:stretch;margin-bottom:var(--spacing-xxl)}.work-item-index{min-width:40px;text-align:left;margin-right:0;margin-bottom:var(--spacing-sm);color:var(--color-tertiary);transition:color .3s ease}.work-item-indent{padding-left:var(--spacing-md);flex:1}.work-item-card-frame{overflow:hidden;background:var(--color-base);display:flex;flex-direction:column;cursor:pointer}.work-item-card-head{border:1px solid var(--color-inactive, #30302a);border-bottom:none;display:flex;flex-direction:column;padding:var(--spacing-lg);gap:var(--spacing-lg);transition:var(--transition-fast, all .3s ease)}.work-item-card-frame:hover .work-item-card-head{border-color:var(--color-active)}.work-item-image{width:100%;height:320px;background:var(--color-base);display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:0;position:relative}.work-item-gradient-background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.work-item-thumbnail-container{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:24px;position:relative;z-index:2}.media-item{width:25%;height:25%;object-fit:cover;border-radius:20px;border:4px solid var(--color-base)}.work-item-card-content{display:flex;flex-direction:column;gap:var(--spacing-lg);height:fit-content;padding-top:var(--spacing-lg);padding-bottom:var(--spacing-lg)}.work-item-title{color:var(--color-primary)}.work-item-description{color:var(--color-secondary)}.work-item-cta{width:100%;height:var(--button-height, 64px);border:1px solid var(--color-inactive, #30302a);display:flex;align-items:center;justify-content:space-between;padding:0 var(--spacing-xl);transition:var(--transition-fast, all .3s ease);-webkit-user-select:none;user-select:none;pointer-events:none}.work-item-card-frame:hover .work-item-cta{background-color:var(--color-hover, #1e1e1e);border-color:var(--color-active)}.work-item-card-frame:hover .work-item-cta-text{color:var(--color-primary, #ffffe3)!important}.work-item-card-frame:hover .work-item-cta-arrow{color:var(--color-primary, #ffffe3)}.work-item-cta:focus{outline:2px solid var(--color-primary);outline-offset:-2px}.work-item-cta:active{transform:translateY(1px);transition:transform .1s ease}.work-item-cta-text{transition:var(--transition-fast, all .3s ease);font-weight:var(--font-weight-medium, 500);letter-spacing:.5px}@keyframes workItemCtaBounce{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}.work-item-cta-arrow{display:flex;align-items:center;margin-left:var(--spacing-md);color:var(--color-tertiary, #999988);transition:var(--transition-fast, all .3s ease);animation:workItemCtaBounce 2s ease-in-out infinite;width:var(--icon-size-small, 24px);height:var(--icon-size-small, 24px);justify-content:center}.work-item-root:hover .work-item-index{color:var(--color-primary)}.callout-item{display:flex;flex-direction:column;gap:4px;width:100%}.callout-item-index{font-family:var(--font-family-subtitle);font-size:var(--font-size-subtitle);font-weight:var(--font-weight-medium);color:var(--color-tertiary);transition:color .3s ease}.callout-item-frame{padding:16px;border:1px solid var(--color-inactive);background:var(--color-base);margin-left:12px;transition:border-color .3s ease}.callout-item-content{font-family:var(--font-family-subtitle);font-size:var(--font-size-subtitle);color:var(--color-secondary)}.callout-item:hover .callout-item-index{color:var(--color-primary)}.callout-item:hover .callout-item-frame{border-color:var(--color-primary)}.container{width:100%;height:100%;padding:12px;display:flex;align-items:center;justify-content:center}.media{max-width:100%;max-height:276px;width:auto;height:auto;display:block;margin:0 auto}.phone{border:4px solid #0a0a0a;border-radius:20px;object-fit:cover;box-sizing:border-box}.media{max-width:calc((100% - 12px)/2);max-height:276px;width:auto;height:auto;display:block}.container{width:100%;height:100%;padding:12px;display:flex;gap:12px;align-items:center;justify-content:center}.phone-wrapper{display:flex;align-items:center;justify-content:center;flex:1}.phone-wrapper.small{padding:24px 0}.phone-wrapper.large{padding:16px 0}.media{max-width:100%;width:auto;height:auto;display:block}.phone-wrapper.small .media{max-height:252px}.phone-wrapper.large .media{max-height:268px}.template-media{display:inline-block;position:relative;max-width:100%;overflow:hidden}.template-media__grain{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:.08;filter:url(#noise);mix-blend-mode:overlay;z-index:1}.carousel{flex:1;position:relative;overflow:hidden}.carousel-scroll{display:flex;padding:0;overflow-x:auto;scroll-behavior:smooth;will-change:scroll-position;height:100%}.carousel-scroll::-webkit-scrollbar{height:2px}.carousel-scroll::-webkit-scrollbar-track{background:transparent}.carousel-scroll::-webkit-scrollbar-thumb{background:var(--color-inactive);border-radius:2px}.carousel-scroll::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}.carousel-item{flex:0 0 auto;width:fit-content;height:100%;overflow:hidden;position:relative;transition:var(--transition-fast);border:none;border-radius:0}.carousel-item img{width:auto;height:100%;object-fit:contain;transition:transform .3s ease;border-radius:0}.dither-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.work-page{width:100%;min-height:100vh;background:var(--color-base);color:var(--color-primary);position:relative;overflow:hidden}.work-content-section{position:fixed;top:0;left:0;right:0;width:100%;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl);z-index:1;pointer-events:none}.work-content-section>*{pointer-events:auto}.work-hero-container{display:flex;flex-direction:row;gap:24px;max-width:1200px;width:100%;align-items:center}.work-description{flex:1}.down-cta{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer;margin-top:var(--spacing-lg)}.down-arrow{color:var(--color-tertiary);transition:transform .3s ease,color .3s ease;animation:bounce 2s ease-in-out infinite}.down-cta:hover .down-arrow{transform:scale(1.2);color:var(--color-primary)}.about-page{width:100%;min-height:100vh;background:var(--color-base);color:var(--color-primary)}.about-intro2-container{border:1px solid var(--color-inactive)}.about-content-section{width:100%;margin-top:64px}.contact-page{width:100%;min-height:100vh;background:var(--color-base);color:var(--color-primary)}.contact-content-section{width:100%;padding-top:var(--header-height)}.contact-link{color:var(--color-primary);text-decoration:underline;transition:var(--transition-fast)}.contact-link:hover{color:var(--color-active)}.resume-page{width:100%;min-height:100vh;background:var(--color-base);color:var(--color-primary)}.resume-content-section{width:100%;padding-top:var(--header-height)}.resume-item{margin-bottom:var(--spacing-xl)}.resume-item h3{margin-bottom:var(--spacing-xs)}.resume-item .S1{color:var(--color-secondary);margin-bottom:var(--spacing-sm);display:block}.resume-item .B1{color:var(--color-secondary)}.casestudy-page{width:100%;height:100%;min-height:100vh;position:relative;overflow:hidden}.casestudy-content-section{width:100%;height:100%;position:relative;overflow:hidden}.casestudy-content{display:flex;gap:24px;width:100%;max-width:1200px;align-items:flex-start;overflow:visible;padding:0 16px}.casestudy-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:24px}.casestudy-title{width:100%;display:flex;flex-direction:column;gap:8px}.casestudy-divider{width:100%;height:1px;background-color:var(--color-tertiary)}.casestudy-title-top{height:12px;width:100%;display:flex;justify-content:space-between;align-items:center}.casestudy-title-top .S1{color:var(--color-tertiary)}.casestudy-title-text{width:100%;height:fit-content;padding-left:12px;margin:0}.casestudy-title-bottom{height:12px;width:100%;display:flex;justify-content:space-between;align-items:center}.casestudy-title-bottom .S1{color:var(--color-tertiary)}.casestudy-description{font-size:24px;font-weight:300;color:var(--color-active);margin:0;text-align:left;line-height:1.5;opacity:.8;white-space:pre-line}.casestudy-read-more{width:100%;height:64px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}.casestudy-read-more svg{color:var(--color-tertiary);animation:bounce 2s ease-in-out infinite;transition:transform .3s ease,color .3s ease}.casestudy-read-more:hover svg{transform:scale(1.2);color:var(--color-primary)}.casestudy-read-more span{font-size:16px;color:var(--color-active)}.casestudy-impact{display:flex;flex-direction:column;gap:12px;width:100%}.casestudy-impact-top{width:fit-content}.casestudy-impact-top h3{margin:0}.casestudy-impact-content{display:flex;flex-direction:row;gap:12px}.casestudy-impact-metric{width:156px;aspect-ratio:1;border:1px solid var(--color-inactive);overflow:hidden;cursor:pointer;position:relative}.casestudy-impact-metric-inner{transition:transform .3s ease}.casestudy-impact-metric:hover .casestudy-impact-metric-inner{transform:translateY(-156px)}.casestudy-impact-metric-content{padding:16px;display:flex;flex-direction:column;justify-content:space-between;height:156px;box-sizing:border-box}.casestudy-impact-metric-description{width:156px;height:156px;background-color:var(--color-primary);display:flex;align-items:flex-start;justify-content:flex-start;padding:16px;box-sizing:border-box}.casestudy-impact-metric-description .subtitle{text-align:left;color:var(--color-base)}.casestudy-impact-metric-top{width:100%;display:flex;justify-content:space-between;align-items:center}.casestudy-impact-metric-text{height:32px;display:flex;align-items:center;justify-content:center;gap:8px}.casestudy-impact-metric-text span{font-family:Satoshi,sans-serif;font-size:48px;font-weight:700;color:var(--color-active);line-height:1.2}.casestudy-impact-metric-prefix,.casestudy-impact-metric-unit{font-size:24px!important}.casestudy-impact-metric-bottom{width:100%;display:flex;justify-content:space-between;align-items:center}.casestudy-impact-metric-top .S1,.casestudy-impact-metric-bottom .S1{color:var(--color-tertiary)}.casestudy-impact-metric-top svg{color:var(--color-tertiary)}.casestudy-image{flex:1;min-width:0;display:flex;flex-direction:column;gap:24px;overflow:visible}.casestudy-image img{width:100%;height:auto;object-fit:cover}@media (max-width: 768px){.casestudy-content{flex-direction:column;gap:16px;padding:0 12px}.casestudy-description{font-size:20px}.casestudy-impact-content{flex-direction:column;gap:8px}.casestudy-impact-metric{width:100%;aspect-ratio:2/1}}@media (max-width: 480px){.casestudy-content{padding:0 8px}.casestudy-description{font-size:18px}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.content-stack{width:100%;height:calc(100vh - 132px);position:relative;display:flex;flex-direction:column;gap:0;overflow:hidden;margin-top:-1px;isolation:isolate}.content-stack.transitioning{pointer-events:none}.content-stack-wrapper{position:absolute;top:0;left:0;width:100%;isolation:isolate}.content-stack-wrapper:last-child{margin-bottom:0}.content-stack-item{position:relative;width:100%;transition:all .5s cubic-bezier(.4,0,.2,1);border:1px solid var(--color-inactive);background:var(--base)}.content-stack-wrapper.stack-position-1{z-index:3}.content-stack-wrapper.stack-position-2{z-index:2}.content-stack-wrapper.stack-position-3{z-index:1}.content-stack-item.active{position:sticky;top:0;z-index:10;border-color:var(--color-active)}.content-stack-item>*{width:100%;height:100%}@media (max-width: 768px){.content-stack{height:calc(100vh - 100px)}}@media (max-width: 480px){.content-stack{height:calc(100vh - 80px)}}.image-container{width:100%;height:fit-content}.image-component{width:100%;height:auto;display:block;object-fit:cover}.card{width:fit-content;position:relative;background:none;border:none;padding:0;margin:0}.card-index{display:block;margin-bottom:var(--spacing-sm, 8px);width:fit-content}.card-indent{padding-left:var(--spacing-md, 12px);width:fit-content}.card-frame{display:flex;gap:0;width:var(--card-width-default, 540px);padding:0;margin:0;border:1px solid var(--color-inactive, #30302a);overflow:hidden}.card-frame:hover{border-color:var(--color-primary, #ffffe3)}.card-frame.expanded{width:var(--card-width-expanded, 1136px)}.card-frame.expanded .card-body{width:100%}.card-frame.expanded .card-head{width:var(--card-head-expanded, 352px);min-width:var(--card-head-expanded, 352px);border-right:1px solid var(--color-inactive, #30302a)}.card-frame:hover .card-head{border-right-color:var(--color-primary, #ffffe3)}.card-frame:hover .card-cta{background-color:var(--color-hover, #1e1e1e);border-top-color:var(--color-primary, #ffffe3)}.card-frame:hover .card-cta span{color:var(--color-primary, #ffffe3)!important}.card-frame:hover .card-cta .cta-icon{color:var(--color-primary, #ffffe3)}.card-frame:hover .card-cta .cta-icon svg{fill:var(--color-primary, #ffffe3)}.card-frame.expanded .body-scroll{overflow-x:auto;overflow-y:hidden}.card-head{min-width:var(--card-width-default, 540px);width:var(--card-width-default, 540px);height:var(--card-height-default, 540px);display:flex;flex-direction:column;justify-content:space-between;flex-shrink:0;padding:0;margin:0;cursor:pointer}.card-body{width:0;height:var(--card-height-default, 540px);overflow:hidden;background:none;padding:0;margin:0;flex:1}.card-content{padding:var(--spacing-xl, 24px);display:flex;flex-direction:column;gap:0}.card-icon-wrapper{width:var(--icon-size-default, 72px);height:var(--icon-size-default, 72px);padding-bottom:var(--spacing-xl, 24px);display:flex;align-items:center;justify-content:center}.card-icon{width:100%;height:100%;color:var(--color-primary, #ffffe3);transition:var(--transition-fast, all .3s ease);display:block;flex-shrink:0;animation:cardIconPulse 3s ease-in-out infinite}.card-icon svg{width:100%;height:100%;display:block}.card-frame:hover .card-icon{color:var(--color-primary, #ffffe3)}.card-frame:hover .card-icon svg{fill:var(--color-primary, #ffffe3)}.card-content h3{padding-bottom:var(--spacing-md, 12px);word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.card-cta{width:100%;height:var(--button-height, 64px);display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:0 var(--spacing-xl, 24px);border-top:1px solid var(--color-inactive, #30302a);transition:var(--transition-fast, all .3s ease)}.body-scroll{height:100%;min-width:100%;display:flex;gap:4px;padding:0;overflow:hidden;-webkit-overflow-scrolling:touch}.body-scroll img{height:var(--card-height-default, 540px);width:auto;object-fit:cover;flex-shrink:0}.card-content p{margin:0;line-height:1.5;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.card-content p ul{margin:var(--spacing-lg, 16px) 0 0 0;padding-left:20px;list-style-type:disc}.card-content p li{margin-bottom:var(--spacing-sm, 8px);line-height:1.4}.card-content p li:last-child{margin-bottom:0}.body-scroll.carousel-mode{display:block;gap:0;padding:0}.head-item{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;display:flex;flex-direction:column;gap:4px;padding:16px 16px 0;background:var(--color-base, #0e0e10);opacity:0;pointer-events:none;transition:opacity .3s ease,background-color .2s ease,position .3s ease,margin .3s ease}.head-item.active{opacity:1;pointer-events:auto}.card-carousel-head-stack.menu-open .head-item{position:relative;top:auto;left:auto;right:auto;bottom:auto;height:86px;opacity:1;pointer-events:auto;margin-bottom:1px;transition:opacity .2s ease .1s,background-color .2s ease,position 0s}.card-carousel-head-stack.menu-open .head-item.active{background:var(--color-hover, #1e1e1e)}.card-carousel-head-stack.menu-open .head-item:not(.active){background:var(--color-base, #0e0e10);opacity:.8;transition:background-color .2s ease,opacity .2s ease}.card-carousel-head-stack.menu-open .head-item:not(.active):hover{background:var(--color-hover, #1e1e1e);opacity:1}.head-item-top{display:flex;align-items:center;width:100%}.head-item-index{font-family:SF Mono,Menlo,Monaco,Consolas,monospace;font-size:14px;font-weight:400;letter-spacing:0;line-height:normal;color:var(--color-tertiary, #999988);margin:0;padding:0}.head-item-progress-bar{width:100%;height:12px;display:flex;align-items:center;margin-top:auto;margin-bottom:0;padding:0}.head-item-progress-fill{height:2px;background-color:var(--color-primary, #ffffe3);width:0%}.head-item-title{font-family:Satoshi,Arial,Helvetica,sans-serif;font-size:24px;font-weight:700;line-height:1.2;letter-spacing:0;color:var(--color-primary, #ffffe3);margin:0;padding-left:12px;transition:opacity .3s ease,transform .3s ease}.head-item-title.animate{animation:titleSlideIn .4s ease-out}@keyframes titleSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.media-set{display:flex;flex-direction:row;gap:var(--media-gap, 8px);height:100%;align-items:stretch;flex-shrink:0}.media-set img,.media-set video{width:auto;height:100%;max-height:100%;object-fit:contain;object-position:center;flex-shrink:0}.annotation-item{width:260px;min-width:260px;height:fit-content;display:flex;flex-direction:column;gap:0;flex-shrink:0}.annotation-index{font-family:var(--font-family-subtitle);font-size:var(--font-size-annotation-subtitle, 8px);font-weight:var(--font-weight-regular, 400);color:var(--color-tertiary, #999988);margin:0;padding:0;flex-shrink:0;align-self:flex-start}.annotation-content{display:flex;gap:0;margin-left:0;width:100%}.annotation-frame{margin-left:var(--spacing-sm, 8px);border:1px solid var(--color-primary, #ffffe3);padding:var(--spacing-md, 12px);background:var(--color-base, #0e0e10);display:flex;flex-direction:column;gap:var(--spacing-xs, 4px);flex:1}.annotation-title{font-family:var(--font-family-title);font-size:var(--font-size-annotation-title, 14px);font-weight:var(--font-weight-bold, 700);color:var(--color-primary, #ffffe3);margin:0;padding:0;line-height:1.2}.annotation-description{font-family:var(--font-family-subtitle);font-size:var(--font-size-annotation-subtitle, 10px);font-weight:var(--font-weight-regular, 400);color:var(--color-secondary, #ccccb6);margin:0;padding:0;line-height:1.4}.annotations{width:fit-content;height:fit-content;display:flex;flex-direction:column;flex-wrap:wrap;align-content:flex-start;gap:var(--spacing-xl, 24px);padding:0;max-height:500px}.text-set{display:flex;flex-direction:column;gap:var(--text-gap, 12px);justify-content:flex-start;align-items:flex-start;flex-shrink:0;height:100%;padding-left:12px}.text-set>*{width:100%;max-width:320px}.text-set-context{font-family:Satoshi,Arial,Helvetica,sans-serif;font-size:20px;font-weight:400;line-height:1.5;letter-spacing:0;color:var(--secondary);margin:0;padding-bottom:8px}.body-item{height:100%;min-width:100%;flex-shrink:0;display:flex;align-items:stretch;background:var(--color-body, #1D1D21)}.body-item-content{height:100%;width:fit-content;display:flex;gap:24px;padding:16px;align-items:flex-start}.body-item-annotations{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}.card-carousel{height:100%;min-width:100%;display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden}.card-carousel-head-stack{position:relative;flex-shrink:0;z-index:10;height:86px;cursor:pointer;transition:background-color .2s ease,height .4s cubic-bezier(.4,0,.2,1);overflow:hidden}.card-carousel-head-stack.menu-open{height:var(--card-height-default, 540px);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.card-carousel-head-stack.menu-open::-webkit-scrollbar{width:6px}.card-carousel-head-stack.menu-open::-webkit-scrollbar-track{background:transparent}.card-carousel-head-stack.menu-open::-webkit-scrollbar-thumb{background:var(--color-tertiary, #999988);border-radius:3px}.card-carousel-head-stack.menu-open::-webkit-scrollbar-thumb:hover{background:var(--color-secondary, #cccccc)}.card-carousel-head-stack{animation-duration:.4s;animation-timing-function:cubic-bezier(.4,0,.2,1)}.card-carousel-head-stack.menu-expanding{animation-name:menuExpand}.card-carousel-head-stack.menu-collapsing{animation-name:menuCollapse}@keyframes menuExpand{0%{height:86px}to{height:var(--target-height)}}@keyframes menuCollapse{0%{height:var(--target-height)}to{height:86px}}.card-carousel-head-stack:hover,.card-carousel-head-stack:hover .head-item.active{background:var(--color-hover, #1e1e1e)}.card-carousel-body-stack{flex:1;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;display:flex;gap:32px;margin:12px}.card-carousel-collapse-button{flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:200px;padding:0 24px}.collapse-btn{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--color-inactive, #30302a);border:1px solid var(--color-inactive, #30302a);border-radius:4px;color:var(--color-tertiary, #999988);font-family:var(--font-family-subtitle);font-size:var(--font-size-subtitle);font-weight:var(--font-weight-medium);cursor:pointer;transition:all .2s ease}.collapse-btn:hover{background:var(--color-hover, #1e1e1e);border-color:var(--color-primary, #ffffe3);color:var(--color-primary, #ffffe3)}.collapse-btn:active{transform:translateY(1px)}.collapse-btn-text{white-space:nowrap}.collapse-btn-icon{display:flex;align-items:center;justify-content:center;transition:transform .2s ease}.collapse-btn:hover .collapse-btn-icon{transform:translateY(-1px)}.card-cta{width:100%;height:var(--button-height, 64px);display:flex;justify-content:space-between;align-items:center;padding:0 var(--spacing-xl, 24px);border-top:1px solid var(--color-inactive, #30302a);transition:var(--transition-fast, all .3s ease);position:relative;overflow:hidden;pointer-events:none}.cta-icon-wrapper{width:var(--icon-size-small, 24px);height:var(--icon-size-small, 24px);display:flex;align-items:center;justify-content:center}.cta-icon-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.cta-icon{width:100%;height:100%;color:var(--color-tertiary, #999988);transition:var(--transition-fast, all .3s ease);display:block;flex-shrink:0}.cta-icon svg{width:100%;height:100%;display:block}.full-card-cta{width:100%;height:64px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:0 24px;border-top:1px solid var(--color-inactive);transition:all .3s ease;position:relative;overflow:hidden}.full-card-cta:hover span{color:var(--color-active)!important}.full-card{width:1148px;position:relative;background:none;border:none;padding:0;margin:0}.full-card-index{display:block;margin-bottom:8px;width:fit-content}.full-card-indent{padding-left:12px;width:1148px}.full-card-frame{display:flex;gap:0;width:1136px;padding:0;margin:0;border:1px solid var(--color-inactive);overflow:hidden}.full-card-frame:hover{border-color:var(--color-active)}.full-card-head{min-width:352px;width:352px;height:540px;display:flex;flex-direction:column;justify-content:space-between;flex-shrink:0;padding:0;margin:0;border-right:1px solid var(--color-active)}.full-card-body{width:100%;height:540px;overflow:hidden;background:none;border:1px solid var(--color-inactive);padding:0;margin:0 0 0 -1px;flex:1}.full-card-content{padding:24px;display:flex;flex-direction:column;gap:0}.full-card-icon{width:72px;height:auto;padding-bottom:24px;color:var(--color-active)}.full-card-content h3{padding-bottom:12px}.full-card-cta{width:100%;height:64px;display:flex;justify-content:space-between;align-items:center;padding:0 24px;border-top:1px solid var(--color-inactive)}.full-card-cta:hover{background-color:var(--color-hover);border-top-color:var(--color-active)}.full-card-cta:hover span,.full-card-cta:hover .full-card-cta-icon{color:var(--color-active)}.full-card-cta-icon{width:24px;height:24px;color:var(--color-tertiary);transition:all .3s ease}.full-card-body-scroll{height:100%;min-width:100%;display:flex;gap:24px;padding:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.full-card-body-scroll.carousel-mode{display:block;gap:0;padding:0}.full-card-body-scroll::-webkit-scrollbar{display:none}.full-card-body-scroll img{height:540px;width:auto;object-fit:cover;flex-shrink:0}.card-group{display:flex;gap:24px;justify-content:space-between;position:relative;transition:all .3s ease}.card-group .card:first-child.expanded{transform:translate(0)}.card-group .card:last-child.expanded{transform:translate(-50%)}.card-group .card:first-child.expanded~.card.unexpanded{transform:translate(100%);pointer-events:none}.card-group .card:first-child.unexpanded{transform:translate(-100%);pointer-events:none}.card-group-item{flex-shrink:0}.tile{width:100%;height:fit-content;border:1px solid var(--color-inactive);border-radius:0;transition:var(--transition-fast)}.tile:hover{border-color:var(--color-primary);background-color:var(--color-hover)}.tile-column{border:none}.tile-column:hover{background-color:transparent}.tile-head{width:100%;padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-sm)}.tile-head-top{width:100%;height:var(--spacing-lg);display:flex;justify-content:space-between;align-items:center}.tile-head-icon{width:var(--spacing-lg);height:var(--spacing-lg);display:flex;align-items:center;justify-content:center}.tile-head-title{width:100%;height:var(--spacing-xxl);display:flex;align-items:center;padding-left:var(--spacing-md)}.tile-head-bottom{width:100%;height:var(--spacing-lg);display:flex;justify-content:space-between;align-items:center;color:var(--color-tertiary)}.tile-divider{width:calc(100% - var(--spacing-xxl));height:1px;background-color:var(--color-inactive);margin:0 var(--spacing-md);transition:var(--transition-fast)}.tile-body{width:100%;height:fit-content;padding:var(--spacing-lg)}.tile-icon-placeholder{width:var(--spacing-sm);height:var(--spacing-sm);background-color:var(--color-inactive);border-radius:50%}.tile-icon-svg{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.tile-icon-svg svg{width:100%;height:100%;color:var(--color-tertiary, #999988);fill:var(--color-tertiary, #999988)}.tile-column{width:100%;display:flex;flex-direction:column}.tile-column-subtitle{width:100%;margin-bottom:12px;display:flex;align-items:center}.tile-column-content{width:100%;display:flex;flex-direction:column}@media (max-width: 768px){.tile-column-content{gap:12px}.tile-column-subtitle{margin-bottom:8px}}@media (max-width: 480px){.tile-column-content{gap:8px}.tile-column-subtitle{margin-bottom:6px}}.tile-row{width:100%}.tile-row-subtitle{margin-bottom:16px}.tile-row-content{width:100%}.tile-row-content>*{flex:1}.dither-playground{min-height:100vh;background:#0a0a0a;color:#ffffe3;padding:40px}.reset-button,.export-button,.import-button,.apply-button{padding:12px 24px;background:#1e1e1e;border:1px solid #30302a;color:#ffffe3;cursor:pointer;font-size:14px;font-weight:500;transition:all .3s ease;border-radius:4px}.reset-button:hover,.export-button:hover,.import-button:hover,.apply-button:hover{background:#2a2a2a;border-color:#ffffe3}.import-button{background:#1a3a5d;border-color:#2a4a6d}.import-button:hover{background:#2a4a6d;border-color:#3a5a7d}.import-section{background:#1e1e1e;border:1px solid #30302a;border-radius:8px;padding:20px;margin-bottom:20px}.import-section h3{margin:0 0 12px;font-size:16px;font-weight:500;color:#ffffe3}.import-section textarea{width:100%;background:#0a0a0a;border:1px solid #30302a;border-radius:4px;color:#998;font-family:Courier New,monospace;font-size:12px;padding:12px;resize:vertical;margin-bottom:12px}.import-section textarea:focus{outline:none;border-color:#ffffe3}.apply-button{background:#1a4d1a;border-color:#2a5d2a}.apply-button:hover{background:#2a5d2a;border-color:#3a7d3a}.playground-content{display:grid;grid-template-columns:1fr 400px;gap:40px}.dither-preview{position:relative;width:100%;height:600px;background:#000;border:1px solid #30302a;border-radius:8px;overflow:hidden}.controls-panel{display:flex;flex-direction:column;gap:24px;height:600px;overflow-y:auto;padding-right:12px}@media (max-width: 1200px){.playground-content{grid-template-columns:1fr}.controls-panel{height:auto;max-height:none;overflow-y:visible}.dither-preview{height:400px}}.pixel-blast-container{width:520px;height:320px;max-width:520px;max-height:320px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);overflow:hidden;z-index:1}.pixelblast-playground{min-height:100vh;background:#0a0a0a;color:#ffffe3;padding:40px}.pixelblast-preview{position:relative;background:#000;border:1px solid #30302a;border-radius:8px;overflow:hidden;flex-shrink:0}@media (max-width: 1200px){.playground-content{flex-direction:column}.controls-panel{width:100%;max-height:none;overflow-y:visible}.pixelblast-preview{width:100%!important;max-width:100%}}.aurora-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.aurora-playground{min-height:100vh;background:#0a0a0a;color:#ffffe3;padding:40px}.aurora-preview{position:relative;background:#000;border:1px solid #30302a;border-radius:8px;overflow:hidden;flex-shrink:0}.control-group input[type=color]{width:100%;height:40px;background:#0a0a0a;border:1px solid #30302a;border-radius:4px;cursor:pointer}.control-group input[type=color]:focus{outline:none;border-color:#ffffe3}@media (max-width: 1200px){.playground-content{flex-direction:column}.controls-panel{width:100%;max-height:none;overflow-y:visible}.aurora-preview{width:100%!important;max-width:100%}}.gradual-blur{pointer-events:none;transition:opacity .3s ease-out;isolation:isolate}.gradual-blur-parent{overflow:hidden}.gradual-blur-inner{pointer-events:none;position:relative;width:100%;height:100%}.gradual-blur-inner>div{-webkit-backdrop-filter:inherit;backdrop-filter:inherit}@supports not (backdrop-filter: blur(1px)){.gradual-blur-inner>div{background:#0000004d;opacity:.5}}.gradual-blur-fixed{position:fixed!important;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:1000}.gradualblur-playground{min-height:100vh;background:#0a0a0a;color:#ffffe3;padding:40px}.playground-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;padding-bottom:20px;border-bottom:1px solid #30302a}.playground-header h1{font-size:32px;font-weight:400;margin:0;color:#ffffe3}.header-buttons{display:flex;gap:12px}.reset-button,.export-button{padding:12px 24px;background:#1e1e1e;border:1px solid #30302a;color:#ffffe3;cursor:pointer;font-size:14px;font-weight:500;transition:all .3s ease;border-radius:4px}.reset-button:hover,.export-button:hover{background:#2a2a2a;border-color:#ffffe3}.export-button{background:#1a4d1a;border-color:#2a5d2a}.export-button:hover{background:#2a5d2a;border-color:#3a7d3a}.playground-content{display:flex;gap:40px;align-items:flex-start}.gradualblur-preview{position:relative;background:linear-gradient(135deg,#667eea,#764ba2);border:1px solid #30302a;border-radius:8px;overflow:hidden;flex-shrink:0}.preview-content{padding:40px;color:#fff;font-size:18px;line-height:1.8}.preview-content p{margin:20px 0}.controls-panel{display:flex;flex-direction:column;gap:24px;width:400px;max-height:800px;overflow-y:auto;padding-right:12px;flex-shrink:0}.controls-panel::-webkit-scrollbar{width:8px}.controls-panel::-webkit-scrollbar-track{background:#1e1e1e;border-radius:4px}.controls-panel::-webkit-scrollbar-thumb{background:#30302a;border-radius:4px}.controls-panel::-webkit-scrollbar-thumb:hover{background:#40403a}.control-section{background:#1e1e1e;padding:20px;border-radius:8px;border:1px solid #30302a}.control-section h3{margin:0 0 16px;font-size:16px;font-weight:500;color:#ffffe3;border-bottom:1px solid #30302a;padding-bottom:8px}.control-group{margin-bottom:16px}.control-group:last-child{margin-bottom:0}.control-group label{display:flex;flex-direction:column;gap:8px;font-size:14px;color:#998;font-weight:500}.control-group input[type=range]{width:100%;height:4px;background:#30302a;border-radius:2px;outline:none;-webkit-appearance:none}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#ffffe3;border-radius:50%;cursor:pointer;transition:all .2s ease}.control-group input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);background:#ffffea}.control-group input[type=range]::-moz-range-thumb{width:16px;height:16px;background:#ffffe3;border-radius:50%;cursor:pointer;border:none;transition:all .2s ease}.control-group input[type=range]::-moz-range-thumb:hover{transform:scale(1.2);background:#ffffea}.control-group input[type=range]:disabled{opacity:.3;cursor:not-allowed}.control-group select{width:100%;padding:8px;background:#0a0a0a;border:1px solid #30302a;border-radius:4px;color:#ffffe3;font-size:14px;cursor:pointer}.control-group select:focus{outline:none;border-color:#ffffe3}.control-group select:disabled{opacity:.3;cursor:not-allowed}.checkbox-group label{flex-direction:row;align-items:center;gap:12px;cursor:pointer}.checkbox-group input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#ffffe3}.code-output{background:#0a0a0a;padding:20px;border-radius:8px;border:1px solid #30302a}.code-output h3{margin:0 0 12px;font-size:14px;font-weight:500;color:#ffffe3}.code-output pre{margin:0;font-family:Courier New,monospace;font-size:12px;line-height:1.6;color:#998;overflow-x:auto}@media (max-width: 1200px){.playground-content{flex-direction:column}.controls-panel{width:100%;max-height:none;overflow-y:visible}.gradualblur-preview{width:100%!important;max-width:100%}}