@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap";:root{--font-heading: "Press Start 2P", cursive;--font-body: "Microsoft Sans Serif", Tahoma, Verdana, Geneva, sans-serif;--font-pixel: "VT323", monospace;--win95-desktop: #008080;--win95-window: #c0c0c0;--win95-titlebar: #000080;--win95-titlebar-text: #ffffff;--win95-text: #000000;--win95-border: #000000;--win95-highlight: #ffffff;--win95-shadow: #808080;--win95-window-highlight: #ffffff;--win95-window-shadow: #808080;--win95-text-shadow: rgba(255, 255, 255, .7);--win95-button-face: #c0c0c0;--win95-button-highlight: #ffffff;--win95-button-shadow: #808080;--win95-text-inverse: #ffffff;--win95-border-light: #ffffff;--win95-border-dark: #808080;--win95-active-title: #000080;--win95-inactive-title: #808080;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--breakpoint-sm: 480px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1200px;--border-radius-sm: 4px;--border-radius-md: 8px;--border-radius-lg: 16px;--transition-fast: .2s ease;--transition-normal: .3s ease;--transition-slow: .5s ease}*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0 0 40px;font-family:var(--font-body);background-color:var(--win95-desktop);background-image:url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h1v1H0V0zm2 2h1v1H2V2z' fill='%23000000' fill-opacity='0.1'/%3E%3C/svg%3E");color:var(--win95-text);line-height:1.6;font-size:16px;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0,0 L0,15 L5,10 L10,20 L15,18 L8,5 Z' fill='white' stroke='black'/%3E%3C/svg%3E"),auto;min-height:100vh;overflow-x:hidden}.app{min-height:100vh;display:flex;flex-direction:column;position:relative;max-width:100%}.site-header{background-color:var(--win95-titlebar);color:var(--win95-titlebar-text);padding:var(--spacing-sm);position:sticky;top:0;z-index:100;border-bottom:2px solid var(--win95-border);box-shadow:0 2px 0 var(--win95-shadow)}.header-content{width:100%;max-width:var(--breakpoint-xl);margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-xs) var(--spacing-sm);flex-wrap:wrap;gap:var(--spacing-sm)}.site-title{margin:0;font-family:"Press Start 2P",cursive;font-size:1.2rem;font-weight:400;letter-spacing:1px;text-transform:uppercase;text-shadow:1px 1px 0 var(--win95-text-shadow);max-width:100%;overflow-wrap:anywhere;line-height:1.4}nav{display:flex;gap:var(--spacing-xs);flex-wrap:wrap}.nav-button{background:var(--win95-window);border:2px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight);color:var(--win95-text);font-family:var(--font-body);font-size:1rem;padding:var(--spacing-xs) var(--spacing-md);min-width:100px;text-align:center;cursor:pointer;transition:all .2s ease;white-space:nowrap}.nav-button:hover{background:var(--win95-window-highlight);border-color:var(--win95-shadow) var(--win95-highlight) var(--win95-highlight) var(--win95-shadow)}.nav-button:active{transform:translateY(1px)}.nav-button.active{background:var(--win95-window-highlight);border-color:var(--win95-shadow) var(--win95-highlight) var(--win95-highlight) var(--win95-shadow)}.main-content{flex:1;width:100%;max-width:var(--breakpoint-xl);margin:var(--spacing-lg) auto;padding:0 var(--spacing-lg);position:relative;z-index:1;padding-bottom:60px}section{background:var(--win95-window);border:2px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg);width:100%;box-shadow:inset -1px -1px 0 var(--win95-window-shadow),inset 1px 1px 0 var(--win95-window-highlight);overflow-x:hidden;animation:fadeIn .3s ease-in-out}.bio,.skills-grid,.projects-list,.games-container,.contact-info{display:grid;gap:var(--spacing-lg);width:100%}.bio{grid-template-columns:1fr;gap:var(--spacing-md);max-width:72ch}.bio p{font-size:1.1rem;line-height:1.7;margin:0}.skills-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.skill-category{background:var(--win95-window);border:2px solid;border-color:var(--win95-shadow) var(--win95-highlight) var(--win95-highlight) var(--win95-shadow);padding:var(--spacing-md)}.skill-category h3{font-family:var(--font-body);font-size:1.05rem;font-weight:700;margin-bottom:var(--spacing-sm);padding-bottom:var(--spacing-xs);border-bottom:2px solid var(--win95-shadow)}.skills-list .skill-item{font-size:1rem;line-height:1.5;padding:2px 0}.experience-list{display:flex;flex-direction:column;gap:var(--spacing-lg);width:100%}.experience-item{background:var(--win95-window);border:2px solid;border-color:var(--win95-shadow) var(--win95-highlight) var(--win95-highlight) var(--win95-shadow);padding:var(--spacing-md);box-shadow:inset 1px 1px 0 var(--win95-window-shadow),inset -1px -1px 0 var(--win95-window-highlight)}.experience-header{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:var(--spacing-sm);border-bottom:2px solid var(--win95-shadow);padding-bottom:var(--spacing-xs);margin-bottom:var(--spacing-xs)}.experience-title{font-family:var(--font-body);font-size:1.15rem;font-weight:700;margin:0}.experience-period{font-family:var(--font-body);font-size:1rem;white-space:nowrap}.experience-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm);font-size:1rem}.experience-company{font-weight:700}.experience-points{display:flex;flex-direction:column;gap:var(--spacing-xs);padding-left:1.1rem}.experience-points li{font-size:1.05rem;line-height:1.5;list-style:square;margin:0}.projects-list{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-lg)}.project-item{background:var(--win95-window);border:2px solid;border-color:var(--win95-shadow) var(--win95-highlight) var(--win95-highlight) var(--win95-shadow);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);transition:transform .2s ease;box-shadow:inset 1px 1px 0 var(--win95-window-shadow),inset -1px -1px 0 var(--win95-window-highlight)}.project-item:hover{background:var(--win95-window-highlight);border-color:var(--win95-shadow) var(--win95-highlight) var(--win95-highlight) var(--win95-shadow)}.project-item h4{color:var(--win95-text);font-family:"Press Start 2P",cursive;font-size:1.1rem;font-weight:400;margin:0;padding-bottom:var(--spacing-xs);border-bottom:2px solid var(--win95-shadow);text-shadow:1px 1px 0 var(--win95-text-shadow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.project-item p{color:var(--win95-text);font-family:var(--font-body);font-size:1.1rem;line-height:1.4;margin:0;flex-grow:1;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.project-meta{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);margin-top:var(--spacing-xs)}.project-meta-item{display:flex;align-items:center;gap:var(--spacing-xs);color:var(--win95-text);font-family:var(--font-body);font-size:1rem;background:var(--win95-window);border:2px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight);padding:.25rem .5rem;box-shadow:inset -1px -1px 0 var(--win95-window-shadow),inset 1px 1px 0 var(--win95-window-highlight)}.project-meta-item .icon{font-size:1.1rem;min-width:20px;text-align:center}.project-links{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-sm);flex-wrap:wrap}.project-link{background:var(--win95-window);border:2px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight);color:var(--win95-text);font-family:var(--font-body);font-size:1rem;padding:.25rem .75rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:var(--spacing-sm);text-decoration:none;box-shadow:inset -1px -1px 0 var(--win95-window-shadow),inset 1px 1px 0 var(--win95-window-highlight);position:relative;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.project-link:hover{background:var(--win95-window-highlight);border-color:var(--win95-shadow) var(--win95-highlight) var(--win95-highlight) var(--win95-shadow);box-shadow:inset 1px 1px 0 var(--win95-window-shadow),inset -1px -1px 0 var(--win95-window-highlight)}.project-link:active{transform:translateY(1px);box-shadow:inset 2px 2px 0 var(--win95-window-shadow),inset -2px -2px 0 var(--win95-window-highlight)}.project-link:focus{outline:2px solid var(--win95-highlight);outline-offset:2px}.project-link .icon{font-size:1.1rem;min-width:18px;text-align:center}.writing-content{display:flex;flex-direction:column;gap:var(--spacing-md);width:100%;max-width:72ch}.writing-content p{font-size:1.1rem;line-height:1.7;margin:0}.writing-topics{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.writing-topic{background:var(--win95-window);border:2px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight);padding:var(--spacing-xs) var(--spacing-sm);font-size:1rem;box-shadow:inset -1px -1px 0 var(--win95-window-shadow),inset 1px 1px 0 var(--win95-window-highlight)}.games-container{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.game-card{background:var(--win95-window);border:2px solid;border-color:var(--win95-shadow) var(--win95-highlight) var(--win95-highlight) var(--win95-shadow);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm)}.contact-container{display:grid;grid-template-columns:1fr;gap:var(--spacing-lg);max-width:800px;margin:0 auto;padding:var(--spacing-md)}.contact-info{background:var(--win95-window);padding:var(--spacing-lg);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.contact-info h3{color:var(--win95-text);font-family:"Press Start 2P",cursive;font-size:1.2rem;font-weight:400;margin:0;padding-bottom:var(--spacing-sm);border-bottom:2px solid var(--win95-shadow);text-shadow:1px 1px 0 var(--win95-text-shadow);width:100%;text-align:center}.contact-links{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md);width:100%;max-width:600px}.contact-link{background:var(--win95-window);border:2px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight);color:var(--win95-text);font-family:var(--font-body);font-size:1.1rem;padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);text-decoration:none;box-shadow:inset -1px -1px 0 var(--win95-window-shadow),inset 1px 1px 0 var(--win95-window-highlight);position:relative;-webkit-user-select:none;user-select:none;min-width:120px;text-align:center}.contact-link.location{cursor:default;opacity:.8;background:var(--win95-window);border-color:var(--win95-shadow) var(--win95-highlight) var(--win95-highlight) var(--win95-shadow);box-shadow:inset 1px 1px 0 var(--win95-window-shadow),inset -1px -1px 0 var(--win95-window-highlight)}.contact-link.information{grid-column:1 / -1;width:100%;margin-top:var(--spacing-sm);cursor:default;opacity:.8;background:var(--win95-window);border-color:var(--win95-shadow) var(--win95-highlight) var(--win95-highlight) var(--win95-shadow);box-shadow:inset 1px 1px 0 var(--win95-window-shadow),inset -1px -1px 0 var(--win95-window-highlight)}.contact-link.location:hover,.contact-link.information:hover{transform:none;background:var(--win95-window);border-color:var(--win95-shadow) var(--win95-highlight) var(--win95-highlight) var(--win95-shadow);box-shadow:inset 1px 1px 0 var(--win95-window-shadow),inset -1px -1px 0 var(--win95-window-highlight)}.contact-link.location:active,.contact-link.information:active{transform:none;box-shadow:inset 1px 1px 0 var(--win95-window-shadow),inset -1px -1px 0 var(--win95-window-highlight)}.contact-link .icon{font-size:1.3rem;min-width:24px;text-align:center}.contact-link span{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}.contact-details-button{grid-column:1 / -1;width:100%;margin-bottom:var(--spacing-sm)}.contact-divider{grid-column:1 / -1;width:100%;height:2px;background:var(--win95-shadow);margin:var(--spacing-md) 0}.contact-form{background:var(--win95-window);padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-md)}.contact-form h3{color:var(--win95-text);font-family:"Press Start 2P",cursive;font-size:1.2rem;font-weight:400;margin:0;padding-bottom:var(--spacing-sm);border-bottom:2px solid var(--win95-shadow);text-shadow:1px 1px 0 var(--win95-text-shadow)}.form-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.form-group label{color:var(--win95-text);font-family:var(--font-body);font-size:1.1rem;text-shadow:1px 1px 0 var(--win95-text-shadow)}.form-group input,.form-group textarea{background:var(--win95-window);border:2px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight);color:var(--win95-text);font-family:var(--font-body);font-size:1.1rem;padding:var(--spacing-sm);width:100%;box-shadow:inset -1px -1px 0 var(--win95-window-shadow),inset 1px 1px 0 var(--win95-window-highlight)}.form-group textarea{min-height:150px;resize:vertical}.form-group input:focus,.form-group textarea:focus{outline:2px solid var(--win95-highlight);outline-offset:2px}.submit-button{background:var(--win95-window);border:2px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight);color:var(--win95-text);font-family:var(--font-body);font-size:1.1rem;padding:var(--spacing-sm) var(--spacing-lg);cursor:pointer;transition:all .2s ease;align-self:flex-start;box-shadow:inset -1px -1px 0 var(--win95-window-shadow),inset 1px 1px 0 var(--win95-window-highlight)}.submit-button:hover{background:var(--win95-window-highlight);border-color:var(--win95-shadow) var(--win95-highlight) var(--win95-highlight) var(--win95-shadow);box-shadow:inset 1px 1px 0 var(--win95-window-shadow),inset -1px -1px 0 var(--win95-window-highlight)}.submit-button:active{transform:translateY(1px);box-shadow:inset 2px 2px 0 var(--win95-window-shadow),inset -2px -2px 0 var(--win95-window-highlight)}@media(max-width:768px){.contact-container{padding:var(--spacing-sm)}.contact-info,.contact-form{padding:var(--spacing-md)}.contact-info h3,.contact-form h3{font-size:1.1rem}.contact-links{gap:var(--spacing-sm)}.contact-link{font-size:1rem;padding:var(--spacing-sm);min-width:100px}.contact-link .icon{font-size:1.2rem;min-width:20px}}@media(max-width:480px){.contact-container{padding:var(--spacing-xs)}.contact-info,.contact-form{padding:var(--spacing-sm)}.contact-info h3,.contact-form h3{font-size:1rem}.contact-links{grid-template-columns:1fr;gap:var(--spacing-xs)}.contact-link{font-size:.9rem;padding:var(--spacing-xs);min-width:90px}.contact-link .icon{font-size:1.1rem;min-width:18px}}.section-title{color:var(--win95-text);margin-bottom:var(--spacing-lg);position:relative;display:inline-block;font-family:"Press Start 2P",cursive;font-size:1.2rem;font-weight:400;letter-spacing:1px;text-transform:uppercase;border-bottom:2px solid var(--win95-shadow);padding-bottom:var(--spacing-xs);text-shadow:1px 1px 0 var(--win95-text-shadow)}@media(max-width:768px){.header-content{flex-direction:column;align-items:stretch;text-align:center}.site-title{font-size:1rem}nav{justify-content:center}.nav-button{font-size:.9rem;padding:var(--spacing-xs) var(--spacing-sm);min-width:80px}.main-content{margin:var(--spacing-md) auto;padding:0 var(--spacing-md)}section{padding:var(--spacing-md);margin-bottom:var(--spacing-md)}.section-title{font-size:1rem;margin-bottom:var(--spacing-md)}.bio p{font-size:1rem}.projects-list{grid-template-columns:1fr;gap:var(--spacing-md)}.project-item{padding:var(--spacing-sm)}.project-item h4{font-size:.9rem}.project-item p{font-size:1rem}.project-meta{font-size:.85rem}.project-link{font-size:.85rem;padding:var(--spacing-xs) var(--spacing-sm);min-width:90px}}@media(max-width:480px){.header-content{padding:var(--spacing-xs)}.site-title{font-size:.9rem}nav{gap:var(--spacing-xs)}.nav-button{font-size:.8rem;padding:var(--spacing-xs);min-width:70px}.main-content{margin:var(--spacing-sm) auto;padding:0 var(--spacing-sm)}section{padding:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.section-title{font-size:.9rem;margin-bottom:var(--spacing-sm)}.bio p{font-size:.9rem}.project-item{padding:var(--spacing-xs)}.project-item h4{font-size:.8rem}.project-item p{font-size:.9rem}.project-meta{font-size:.8rem}.project-link{font-size:.8rem;padding:var(--spacing-xs);min-width:80px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(hover:none){.nav-button:hover{background:var(--win95-window);border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight)}.nav-button:active{background:var(--win95-window-highlight);border-color:var(--win95-shadow) var(--win95-highlight) var(--win95-highlight) var(--win95-shadow)}}.nav-button:focus,.project-item:focus,.game-card:focus,.contact-card:focus{outline:2px solid var(--win95-active-title);outline-offset:2px}.loading{text-align:center;padding:var(--spacing-lg);color:var(--win95-text)}.error-message{background:var(--win95-window);border:2px solid var(--win95-shadow);padding:var(--spacing-md);margin:var(--spacing-md) 0;color:var(--win95-text);text-align:center}.windows-button-container{margin-top:1rem;display:flex;gap:.5rem}.windows-button{background:var(--win95-window);border:2px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight);color:var(--win95-text);font-family:var(--font-body);font-size:1.1rem;padding:var(--spacing-sm) var(--spacing-lg);cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);min-width:120px;text-decoration:none;box-shadow:inset -1px -1px 0 var(--win95-window-shadow),inset 1px 1px 0 var(--win95-window-highlight);position:relative;-webkit-user-select:none;user-select:none}.windows-button:hover{background:var(--win95-window-highlight);border-color:var(--win95-shadow) var(--win95-highlight) var(--win95-highlight) var(--win95-shadow);box-shadow:inset 1px 1px 0 var(--win95-window-shadow),inset -1px -1px 0 var(--win95-window-highlight)}.windows-button:active{transform:translateY(1px);box-shadow:inset 2px 2px 0 var(--win95-window-shadow),inset -2px -2px 0 var(--win95-window-highlight)}.windows-button:focus{outline:2px solid var(--win95-highlight);outline-offset:2px}.windows-button:disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.windows-button .icon{font-size:1.2rem;min-width:20px;text-align:center}.site-footer{background-color:var(--win95-window);border-top:2px solid var(--win95-highlight);color:var(--win95-text);font-family:var(--font-body);padding:0;font-size:14px;text-align:center;position:fixed;bottom:0;left:0;right:0;width:100%;z-index:100;box-shadow:0 -2px 0 var(--win95-shadow)}.footer-content{max-width:1200px;margin:0 auto;padding:8px 16px;display:flex;flex-direction:column;align-items:center;gap:8px}.footer-links{display:flex;gap:1rem}.footer-link{background:var(--win95-window);border:2px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight);padding:.25rem .75rem;font-family:var(--font-body);font-size:14px;color:var(--win95-text);cursor:pointer;transition:all .2s ease}.footer-link:hover{background:var(--win95-window-hover)}.footer-link:active{border-color:var(--win95-shadow) var(--win95-highlight) var(--win95-highlight) var(--win95-shadow);padding:.35rem .65rem .15rem .85rem}.copyright{font-size:14px;color:var(--win95-text);margin:0;text-shadow:1px 1px 0 var(--win95-text-shadow)}.main-content{padding-bottom:60px}@media(max-width:768px){.site-footer{padding:5px;font-size:12px;height:auto;min-height:30px}body,.app{padding-bottom:40px}}@media(max-width:480px){.site-footer{padding:3px;font-size:10px;min-height:25px}body,.app{padding-bottom:30px}}:focus-visible{outline:2px dotted var(--win95-text);outline-offset:2px}:focus:not(:focus-visible){outline:none}.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;padding:var(--spacing-sm) var(--spacing-md);background:var(--win95-titlebar);color:var(--win95-titlebar-text);text-decoration:none}.skip-link:focus{left:0}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:9998}.modal-window{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--win95-window);border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);box-shadow:3px 3px #0000004d;display:flex;flex-direction:column;font-family:var(--font-body);color:var(--win95-text);z-index:9999;max-height:90vh;max-width:95vw}.modal-small{width:90%;max-width:400px}.modal-medium{width:90%;max-width:600px}.modal-large{width:95%;max-width:1200px;height:90%;max-height:800px}.modal-fullscreen{width:95%;max-width:1600px;height:95%;max-height:1000px;min-width:300px;min-height:400px}.modal-header{background:var(--win95-titlebar);color:var(--win95-titlebar-text);padding:4px 8px;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--win95-button-shadow);-webkit-user-select:none;user-select:none;flex-shrink:0}.modal-title{font-family:"Press Start 2P",cursive;font-size:12px;font-weight:400;letter-spacing:1px;text-transform:uppercase;text-shadow:1px 1px 0 rgba(0,0,0,.5);display:flex;align-items:center;gap:8px}.modal-icon{font-size:14px}.modal-controls{display:flex;gap:2px}.modal-close-button{background:var(--win95-button-face);border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);color:var(--win95-text);width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow);padding:0;line-height:1}.modal-close-button:hover{background:var(--win95-window-highlight)}.modal-close-button:active{border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow);box-shadow:inset -1px -1px 0 var(--win95-button-highlight),inset 1px 1px 0 var(--win95-button-shadow)}.modal-content{flex:1;overflow:auto;padding:16px;background:var(--win95-window)}.popup-content{font-family:var(--font-body);font-size:16px;line-height:1.5;white-space:pre-line;color:var(--win95-text)}.popup-footer{padding:8px;border-top:2px solid var(--win95-shadow);display:flex;justify-content:flex-end;background:var(--win95-window)}.popup-ok-button{background:var(--win95-button-face);border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);color:var(--win95-text);padding:4px 24px;font-family:var(--font-body);font-size:16px;cursor:pointer;box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow)}.popup-ok-button:hover{background:var(--win95-window-highlight)}.popup-ok-button:active{border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow);box-shadow:inset -1px -1px 0 var(--win95-button-highlight),inset 1px 1px 0 var(--win95-button-shadow)}@media(max-width:768px){.modal-title{font-size:10px}.modal-content{padding:12px}.modal-large,.modal-fullscreen{width:98%;height:95%}}@media(max-width:480px){.modal-title{font-size:8px}.modal-content{padding:8px}}:root{--win95-window: #c0c0c0;--win95-titlebar: #000080;--win95-button-face: #c0c0c0;--win95-button-highlight: #ffffff;--win95-button-shadow: #808080;--win95-text: #000000;--win95-text-inverse: #ffffff;--win95-border-light: #ffffff;--win95-border-dark: #808080;--win95-active-title: #000080;--win95-inactive-title: #808080}.cat-game{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:#00000080;z-index:9999;overflow:hidden}.cat-game-content{background:var(--win95-window);border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);box-shadow:3px 3px #0000004d;width:95%;max-width:1600px;height:95%;max-height:1000px;display:flex;flex-direction:column;font-family:VT323,monospace;color:var(--win95-text);overflow:hidden;resize:both;min-width:800px;min-height:600px}.screen{flex:1;padding:15px;overflow:hidden;position:relative;background:var(--win95-window);display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid;border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow);margin:10px;box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow)}.screen h2{color:var(--win95-text);margin-bottom:20px;font-family:"Press Start 2P",cursive;text-align:center;font-size:14px;font-weight:400;letter-spacing:1px;text-transform:uppercase;text-shadow:1px 1px 0 rgba(0,0,0,.2)}.choose-face-buttons{display:flex;gap:15px;flex-wrap:wrap;justify-content:center;max-width:800px}.choose-face-btn{background:var(--win95-button-face);border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);padding:8px;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ctext x='0' y='24' font-size='32'%3E👋%3C/text%3E%3C/svg%3E"),auto;transition:all .1s ease;min-width:100px;height:100px;display:flex;align-items:center;justify-content:center;box-shadow:2px 2px #0003}.choose-face-btn:hover{background:var(--win95-button-face);transform:translateY(-2px);box-shadow:3px 3px #0000004d}.choose-face-btn:active{border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow);transform:translate(1px,1px);box-shadow:1px 1px #0003}.choose-face-btn img{width:90px;height:90px;object-fit:contain;image-rendering:pixelated}.game-screen{width:100%;height:100%;display:flex;flex-direction:column;font-family:VT323,monospace;position:relative;background:var(--win95-window);padding:0;margin:0;overflow:hidden}.game-stats{display:flex;gap:15px;padding:8px;background:var(--win95-window);border-bottom:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);font-weight:700;z-index:10;font-family:VT323,monospace;font-size:18px;box-shadow:0 2px #0000001a}.game-container{flex:1;position:relative;overflow:hidden;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ctext x='0' y='24' font-size='32'%3E👋%3C/text%3E%3C/svg%3E"),auto;min-height:500px;background:var(--win95-window);width:100%;height:calc(100% - 60px);margin:0;padding:0;border:2px solid;border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow);box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow)}.game-container:active{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ctext x='0' y='24' font-size='32'%3E✊%3C/text%3E%3C/svg%3E"),auto}.face{position:absolute;transition:transform .1s ease-out;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ctext x='0' y='24' font-size='32'%3E👋%3C/text%3E%3C/svg%3E"),auto;image-rendering:pixelated;width:90px;height:90px;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.2));z-index:1}.face:active{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ctext x='0' y='24' font-size='32'%3E✊%3C/text%3E%3C/svg%3E"),auto}.face img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.face.caught{animation:catch .5s ease-out}.face.disappearing{animation:blink 1s ease-out}.face.special-face{animation:wiggle .5s infinite}@keyframes catch{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(0)}}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}@keyframes wiggle{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}.combo-text{position:absolute;font-family:"Press Start 2P",cursive;font-size:16px;pointer-events:none;animation:float-up 1s ease-out forwards;text-shadow:2px 2px 0 rgba(0,0,0,.5)}@keyframes float-up{0%{transform:translateY(0);opacity:1}to{transform:translateY(-50px);opacity:0}}.windows-button-container{display:flex;gap:15px;margin-top:20px;justify-content:center}.windows-button{padding:8px 16px;background:var(--win95-button-face);border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);color:var(--win95-text);font-family:VT323,monospace;font-size:18px;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ctext x='0' y='24' font-size='32'%3E👋%3C/text%3E%3C/svg%3E"),auto;min-width:80px;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:2px 2px #0003;transition:all .1s ease}.windows-button .button-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;margin:0;padding:0}.windows-button:hover{background:var(--win95-button-face);transform:translateY(-2px);box-shadow:3px 3px #0000004d}.windows-button:active{border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow);transform:translate(1px,1px);box-shadow:1px 1px #0003}.title-bar{background:var(--win95-titlebar);padding:6px 8px;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);box-shadow:0 2px #0000001a}.title-bar h2{margin:0;font-family:"Press Start 2P",cursive;font-size:14px;color:var(--win95-text);text-shadow:1px 1px 0 rgba(0,0,0,.2)}.game-controls{display:flex;gap:10px;padding:8px;background:var(--win95-window);border-top:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);flex-wrap:wrap;justify-content:center;box-shadow:0 -2px #0000001a;height:60px;width:100%;margin-top:auto}.score-display{font-family:"Press Start 2P",cursive;font-size:18px;color:var(--win95-text);text-shadow:2px 2px 0 rgba(0,0,0,.2)}.power-up-active{animation:pulse 1s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.game-over-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:9999}.game-over{background:var(--win95-gray);border:3px solid var(--win95-border);border-radius:0;padding:20px;width:400px;text-align:center;position:relative;box-shadow:4px 4px 0 var(--win95-shadow)}.game-over:before{content:"";position:absolute;top:0;left:0;right:0;height:25px;background:var(--win95-blue)}.game-over h2{color:#fff;margin:-10px 0 20px;position:relative;z-index:1;font-size:16px;text-transform:uppercase}.final-score,.high-score{font-size:24px;margin:15px 0;color:var(--win95-text)}.game-over .buttons{margin-top:20px;display:flex;justify-content:center;gap:10px}.restart-button,.close-button{padding:8px 20px;font-size:14px;background:var(--win95-gray);border:2px solid var(--win95-border);box-shadow:2px 2px 0 var(--win95-shadow);cursor:pointer;color:var(--win95-text);text-transform:uppercase}.restart-button:hover,.close-button:hover{background:var(--win95-highlight)}.restart-button:active,.close-button:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--win95-shadow)}::-webkit-scrollbar-button{width:16px;height:16px;background:var(--win95-button-face);border:1px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow);position:relative}::-webkit-scrollbar-button:hover{background:var(--win95-button-face);border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow)}::-webkit-scrollbar-button:active{background:var(--win95-button-face);border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow);box-shadow:inset -1px -1px 0 var(--win95-button-highlight),inset 1px 1px 0 var(--win95-button-shadow)}::-webkit-scrollbar-button:vertical:start{border-bottom:1px solid var(--win95-button-shadow)}::-webkit-scrollbar-button:vertical:end{border-top:1px solid var(--win95-button-shadow)}::-webkit-scrollbar-button:horizontal:start{border-right:1px solid var(--win95-button-shadow)}::-webkit-scrollbar-button:horizontal:end{border-left:1px solid var(--win95-button-shadow)}::-webkit-scrollbar-track{background:var(--win95-window);border:1px solid;border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow)}*{scrollbar-width:thin;scrollbar-color:var(--win95-button-face) var(--win95-window)}.windows-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--win95-window);border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);padding:0;text-align:center;z-index:1000;width:400px;box-shadow:3px 3px #0000004d;overflow:hidden;transition:all .3s ease}.windows-popup.expanded{width:95%;height:95%;max-width:1600px;max-height:1000px;transform:translate(-50%,-50%)}.windows-popup-header{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;background:var(--win95-titlebar);border-bottom:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight)}.windows-popup-title{color:var(--win95-text-inverse);font-family:"Press Start 2P",cursive;font-size:14px;text-transform:uppercase;text-shadow:1px 1px 0 var(--win95-button-highlight);margin:0}.windows-popup-controls{display:flex;gap:4px}.windows-popup-button{width:16px;height:16px;background:var(--win95-button-face);border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow);transition:all .1s ease;font-size:12px;color:var(--win95-text)}.windows-popup-button:hover{background-color:var(--win95-button-face);border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow);box-shadow:inset -1px -1px 0 var(--win95-button-highlight),inset 1px 1px 0 var(--win95-button-shadow)}.windows-popup-button:active{background-color:var(--win95-button-face);border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow);box-shadow:inset -1px -1px 0 var(--win95-button-highlight),inset 1px 1px 0 var(--win95-button-shadow);transform:translateY(1px)}.windows-popup-content{padding:16px;height:calc(100% - 40px);overflow:auto;background:var(--win95-window)}.game-popup{width:95%;max-width:1600px;height:95%;max-height:1000px;min-width:800px;min-height:600px}.game-popup.expanded{width:100%;height:100%;max-width:none;max-height:none;top:0;left:0;transform:none;border-radius:0}.windows-popup h2{color:var(--win95-text);font-family:"Press Start 2P",cursive;font-size:16px;margin-bottom:12px;text-transform:uppercase;text-shadow:1px 1px 0 var(--win95-button-highlight)}.windows-popup p{color:var(--win95-text);font-family:VT323,monospace;font-size:18px;margin-bottom:16px}.windows-popup .windows-button{margin:8px;min-width:100px;padding:4px 8px;font-size:16px;background-color:var(--win95-button-face);border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);color:var(--win95-text);font-family:VT323,monospace;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow);text-shadow:1px 1px 0px var(--win95-button-highlight);transition:all .1s ease}.game-popup-header{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;background:var(--win95-titlebar);border-bottom:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);margin-bottom:16px}.game-popup-title{color:var(--win95-text);font-family:"Press Start 2P",cursive;font-size:14px;text-transform:uppercase;text-shadow:1px 1px 0 var(--win95-button-highlight);margin:0}.game-popup-controls{display:flex;gap:4px}.game-popup-button{width:16px;height:16px;background:var(--win95-button-face);border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow);transition:all .1s ease}.game-popup-button:hover{background-color:var(--win95-button-face);border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow);box-shadow:inset -1px -1px 0 var(--win95-button-highlight),inset 1px 1px 0 var(--win95-button-shadow)}.game-popup-button:active{background-color:var(--win95-button-face);border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow);box-shadow:inset -1px -1px 0 var(--win95-button-highlight),inset 1px 1px 0 var(--win95-button-shadow);transform:translateY(1px)}.game-popup-content{height:calc(100% - 40px);overflow:hidden}.game-popup h2{color:var(--win95-text);font-family:"Press Start 2P",cursive;font-size:18px;margin-bottom:16px;text-transform:uppercase;text-shadow:1px 1px 0 var(--win95-button-highlight)}.game-popup p{color:var(--win95-text);font-family:VT323,monospace;font-size:20px;margin-bottom:20px}.game-popup .windows-button{margin:8px;min-width:120px;padding:6px 12px;font-size:16px;background-color:var(--win95-button-face);border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);color:var(--win95-text);font-family:VT323,monospace;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow);text-shadow:1px 1px 0px var(--win95-button-highlight);transition:all .1s ease}.game-popup .windows-button:hover{background-color:var(--win95-button-face);border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow);box-shadow:inset -1px -1px 0 var(--win95-button-highlight),inset 1px 1px 0 var(--win95-button-shadow)}.game-popup .windows-button:active{background-color:var(--win95-button-face);border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow);box-shadow:inset -1px -1px 0 var(--win95-button-highlight),inset 1px 1px 0 var(--win95-button-shadow);transform:translateY(1px)}.game-popup .button-icon{width:16px;height:16px;image-rendering:pixelated;filter:drop-shadow(1px 1px 0px var(--win95-button-highlight))}.game-window{position:fixed;background:var(--win95-window);border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);box-shadow:3px 3px #0000004d;min-width:800px;min-height:600px;width:95%;max-width:1600px;height:95%;max-height:1000px;z-index:1000;display:flex;flex-direction:column;resize:both;overflow:hidden;transition:all .3s ease;top:50%;left:50%;transform:translate(-50%,-50%)}.game-window.expanded{width:100%;height:100%;max-width:none;max-height:none;top:0;left:0;transform:none;border-radius:0}.game-window-header{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;background:var(--win95-titlebar);border-bottom:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);cursor:move;-webkit-user-select:none;user-select:none}.game-window-title{color:var(--win95-text-inverse);font-family:"Press Start 2P",cursive;font-size:14px;text-transform:uppercase;text-shadow:1px 1px 0 var(--win95-button-highlight);margin:0;display:flex;align-items:center;gap:8px}.game-window-title img{width:16px;height:16px;image-rendering:pixelated}.game-window-controls{display:flex;gap:4px}.game-window-button{width:16px;height:16px;background:var(--win95-button-face);border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow);transition:all .1s ease;font-size:12px;color:var(--win95-text)}.game-window-button:hover{background-color:var(--win95-button-face);border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow);box-shadow:inset -1px -1px 0 var(--win95-button-highlight),inset 1px 1px 0 var(--win95-button-shadow)}.game-window-button:active{background-color:var(--win95-button-face);border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow);box-shadow:inset -1px -1px 0 var(--win95-button-highlight),inset 1px 1px 0 var(--win95-button-shadow);transform:translateY(1px)}.game-window-content{flex:1;padding:16px;overflow:auto;background:var(--win95-window);position:relative}.game-screen{width:100%;height:100%;display:flex;flex-direction:column;gap:16px}.face-selection{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;height:100%}.choose-face-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px;max-width:800px;width:100%}.choose-face-btn{background:var(--win95-button-face);border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);padding:8px;cursor:pointer;transition:all .1s ease;display:flex;align-items:center;justify-content:center;aspect-ratio:1}.choose-face-btn:hover{transform:scale(1.05);box-shadow:2px 2px 0 var(--win95-button-shadow)}.choose-face-btn:active{transform:scale(.95);box-shadow:inset 1px 1px 0 var(--win95-button-shadow)}.choose-face-btn img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.game-container{flex:1;position:relative;background:var(--win95-window);border:2px solid;border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow);box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow);overflow:hidden;min-height:400px}.game-stats{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:var(--win95-window);border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow)}.game-over-popup{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--win95-window);border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);padding:24px;text-align:center;box-shadow:3px 3px #0000004d;min-width:300px}.windows-button-container{display:flex;gap:16px;justify-content:center;margin-top:16px}.windows-popup,.game-popup,.windows-popup-content,.game-popup-content,.windows-popup-header,.game-popup-header,.windows-popup-title,.game-popup-title,.windows-popup-controls,.game-popup-controls,.windows-popup-button,.game-popup-button{display:none}.cat-game-container{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--win95-window);border:2px solid var(--win95-border-light);border-right-color:var(--win95-border-dark);border-bottom-color:var(--win95-border-dark);box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow);overflow:hidden}.face-selection{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.face-selection h2{font-size:24px;color:var(--win95-text);margin-bottom:20px;text-shadow:1px 1px 0px var(--win95-button-highlight)}.faces-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;width:100%;max-width:800px;margin:20px 0}.face-option{display:flex;flex-direction:column;align-items:center;padding:15px;background:var(--win95-button-face);border:2px solid var(--win95-border-light);border-right-color:var(--win95-border-dark);border-bottom-color:var(--win95-border-dark);box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow);cursor:pointer;transition:all .2s ease}.face-option:hover{background:#d4d4d4;transform:scale(1.05)}.face-option.selected{background:var(--win95-titlebar);color:var(--win95-text-inverse);border-color:var(--win95-titlebar)}.face-image{width:120px;height:120px;object-fit:contain;image-rendering:pixelated;margin-bottom:10px}.start-button{font-size:18px;padding:10px 20px;background:var(--win95-button-face);border:2px solid var(--win95-border-light);border-right-color:var(--win95-border-dark);border-bottom-color:var(--win95-border-dark);box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow);cursor:pointer;transition:all .2s ease;font-family:VT323,monospace}.start-button:hover{background:#d4d4d4;transform:translateY(-2px)}.start-button:active{background:var(--win95-button-face);border-color:var(--win95-border-dark);border-right-color:var(--win95-border-light);border-bottom-color:var(--win95-border-light);box-shadow:inset -1px -1px 0 var(--win95-button-highlight),inset 1px 1px 0 var(--win95-button-shadow);transform:translateY(1px)}.start-button:disabled{opacity:.5;cursor:not-allowed}.game-screen{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.game-stats{position:absolute;top:20px;left:20px;display:flex;gap:20px;font-size:20px;color:var(--win95-text);text-shadow:1px 1px 0px var(--win95-button-highlight);z-index:1;background:var(--win95-button-face);padding:8px 15px;border:2px solid var(--win95-border-light);border-right-color:var(--win95-border-dark);border-bottom-color:var(--win95-border-dark);box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow)}.game-area{position:relative;width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}.game-area:active{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ctext x='0' y='24' font-size='32'%3E✊%3C/text%3E%3C/svg%3E"),auto}.cat-face{position:absolute;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .1s ease-out;z-index:1;filter:drop-shadow(3px 3px 3px rgba(0,0,0,.3));will-change:transform}.cat-face img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.cat-face:hover{filter:drop-shadow(5px 5px 5px rgba(0,0,0,.5)) brightness(1.1)}.cat-face.special{filter:brightness(1.2) contrast(1.1);transform:scale(1.1)}.catch-effect{position:absolute;font-size:28px;font-weight:700;color:var(--win95-text);text-shadow:1px 1px 0px var(--win95-button-highlight);pointer-events:none;animation:float-up 1s ease-out forwards;z-index:2}@keyframes float-up{0%{transform:translateY(0) scale(1);opacity:1}50%{transform:translateY(-30px) scale(1.5);opacity:.8}to{transform:translateY(-60px) scale(.5);opacity:0}}.game-over{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;background:var(--win95-window)}.game-over h2{font-size:36px;color:var(--win95-text);margin-bottom:20px;text-shadow:1px 1px 0px var(--win95-button-highlight)}.final-score,.high-score{font-size:28px;color:var(--win95-text);margin:15px 0;text-shadow:1px 1px 0px var(--win95-button-highlight)}.restart-button,.close-button{font-size:18px;padding:10px 20px;margin:15px;background:var(--win95-button-face);border:2px solid var(--win95-border-light);border-right-color:var(--win95-border-dark);border-bottom-color:var(--win95-border-dark);box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow);cursor:pointer;transition:all .2s ease}.restart-button:hover,.close-button:hover{background:var(--win95-button-highlight)}.restart-button:active,.close-button:active{background:var(--win95-button-face);border-color:var(--win95-border-dark);border-right-color:var(--win95-border-light);border-bottom-color:var(--win95-border-light);box-shadow:inset -1px -1px 0 var(--win95-button-highlight),inset 1px 1px 0 var(--win95-button-shadow);transform:translateY(1px)}.retro-text{font-family:"Press Start 2P",monospace;color:var(--win95-text);text-shadow:1px 1px 0 var(--win95-button-highlight);font-size:24px;letter-spacing:1px}.effect{position:absolute;pointer-events:none;z-index:100}.pixel-burst{width:100px;height:100px;background:radial-gradient(circle,transparent 30%,#fff 30%,#fff 40%,transparent 40%);animation:pixel-burst .5s ease-out forwards}.star-trail{width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23FFD700' d='M10 0l2.5 7.5H20l-6.5 4.7 2.5 7.8-6-4.3-6 4.3 2.5-7.8L0 7.5h7.5z'/%3E%3C/svg%3E") no-repeat;animation:star-trail 1s linear infinite}.glitch{width:80px;height:80px;background:#0ff;mix-blend-mode:screen;animation:glitch .3s steps(2) infinite}.neon-flash{width:60px;height:60px;border:2px solid #fff;box-shadow:0 0 10px #fff,0 0 20px #0ff,0 0 30px #f0f;animation:neon-flash .5s ease-out forwards}@keyframes pixel-burst{0%{transform:scale(0);opacity:1}to{transform:scale(2);opacity:0}}@keyframes star-trail{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.5)}to{transform:rotate(360deg) scale(1)}}@keyframes glitch{0%{transform:translate(0);filter:hue-rotate(0deg)}25%{transform:translate(-5px,5px);filter:hue-rotate(90deg)}50%{transform:translate(5px,-5px);filter:hue-rotate(180deg)}75%{transform:translate(-5px,5px);filter:hue-rotate(270deg)}to{transform:translate(0);filter:hue-rotate(360deg)}}@keyframes neon-flash{0%{transform:scale(0);opacity:1}50%{transform:scale(1.2);opacity:.8}to{transform:scale(1.5);opacity:0}}.game-title{font-family:"Press Start 2P",cursive;font-size:24px;color:var(--win95-text);text-shadow:1px 1px 0 var(--win95-button-highlight);margin-bottom:20px;text-align:center}.game-instructions{font-family:VT323,monospace;font-size:18px;color:var(--win95-text);margin-bottom:20px;text-align:center}.project-note{display:block;font-size:14px;color:var(--win95-active-title);margin-top:8px;font-style:italic;text-shadow:none}.game-over-content{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;background:var(--win95-window);border:2px solid;border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow);box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:300px;z-index:100}.game-over-content .buttons{display:flex;gap:20px;margin-top:20px;justify-content:center;width:100%;flex-direction:row}.game-over-content .restart-button{order:1;margin-right:20px}.game-over-content .close-button{order:2;margin-left:20px}.game-over-content .restart-button:hover,.game-over-content .close-button:hover{background:var(--win95-button-highlight)}.game-over-content .restart-button:active,.game-over-content .close-button:active{border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow);transform:translate(1px,1px);box-shadow:1px 1px #0003}.game-over-overlay{display:none}.game-stats{font-family:VT323,monospace;color:var(--win95-text);text-shadow:1px 1px 0 var(--win95-button-highlight);font-size:16px;text-align:center;margin:20px 0}.game-stats .time{font-size:20px;margin:10px 0;color:var(--win95-active-title)}.game-stats .score,.game-stats .combo{font-size:16px;margin:5px 0;color:var(--win95-text)}@media(max-width:768px){.cat-game-content{width:100%;height:100%;max-width:100%;max-height:100%;min-width:auto;min-height:auto;resize:none}.screen{padding:10px;margin:5px}.screen h2{font-size:12px;margin-bottom:15px}.choose-face-buttons{gap:10px}.choose-face-btn{min-width:80px;height:80px}.choose-face-btn img{width:70px;height:70px}.game-stats{font-size:16px;padding:5px}.game-container{min-height:300px}.face{width:70px;height:70px}.faces-grid{grid-template-columns:repeat(2,1fr);gap:10px}.face-option{min-width:120px;min-height:120px}.face-image{width:80px;height:80px}.start-button{padding:8px 16px;font-size:16px}.game-title{font-size:16px}.game-instructions{font-size:14px;margin-bottom:15px}.game-over-content{width:90%;padding:15px}.game-over-content h2{font-size:18px}.final-score,.high-score{font-size:16px}.restart-button,.close-button{padding:8px 16px;font-size:14px}}@media(max-width:480px){.cat-game-content{border-width:1px}.screen{padding:5px;margin:3px}.screen h2{font-size:10px;margin-bottom:10px}.choose-face-buttons{gap:5px}.choose-face-btn{min-width:60px;height:60px}.choose-face-btn img{width:50px;height:50px}.game-stats{font-size:14px;padding:3px}.game-container{min-height:250px}.face{width:50px;height:50px}.faces-grid{grid-template-columns:repeat(2,1fr);gap:5px}.face-option{min-width:100px;min-height:100px}.face-image{width:60px;height:60px}.start-button{padding:6px 12px;font-size:14px}.game-title{font-size:14px}.game-instructions{font-size:12px;margin-bottom:10px}.game-over-content{width:95%;padding:10px}.game-over-content h2{font-size:16px}.final-score,.high-score{font-size:14px}.restart-button,.close-button{padding:6px 12px;font-size:12px}}@media(hover:none){.cat-face:hover,.face-option:hover,.start-button:hover,.restart-button:hover,.close-button:hover{transform:none}.cat-face:active,.face-option:active,.start-button:active,.restart-button:active,.close-button:active{transform:scale(.95)}}.ux-banner{position:fixed;top:20px;right:20px;background:var(--win95-titlebar);padding:8px 16px;font-family:VT323,monospace;font-size:18px;border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);box-shadow:2px 2px #0003;z-index:1000;white-space:nowrap;cursor:pointer;transition:all .2s ease;text-shadow:1px 1px 0 var(--win95-button-highlight);animation:retroFloat 3s ease-in-out infinite;letter-spacing:1px;max-width:300px;text-align:center}@keyframes retroFloat{0%{transform:translateY(0)}50%{transform:translateY(-5px)}to{transform:translateY(0)}}.game-over-content h2{font-family:VT323,monospace;font-size:32px;color:var(--win95-text);margin-bottom:20px;text-shadow:2px 2px 0 var(--win95-button-shadow)}.game-over-content .final-score,.game-over-content .high-score{font-family:VT323,monospace;font-size:24px;color:var(--win95-text);margin:10px 0;text-shadow:1px 1px 0 var(--win95-button-shadow)}.password-game-container{width:800px;height:600px;margin:0 auto;padding:24px;background-color:var(--win95-window);border:2px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight);box-shadow:inset -1px -1px 0 var(--win95-window-shadow),inset 1px 1px 0 var(--win95-window-highlight),0 0 20px #0003;font-family:var(--font-body);color:var(--win95-text);display:flex;flex-direction:column;position:relative;overflow:hidden;box-sizing:border-box;transform:translateY(50%);top:-300px}.game-content{display:flex;flex-direction:column;gap:16px;flex:1;overflow-y:auto;padding:0 8px 8px 0;height:calc(100% - 100px);min-height:0;box-sizing:border-box;background-color:var(--win95-window)}.encouragement-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--win95-window);border:2px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight);padding:20px;z-index:1000;box-shadow:inset -1px -1px 0 var(--win95-window-shadow),inset 1px 1px 0 var(--win95-window-highlight),0 0 20px #0000004d;font-family:var(--font-body);font-size:16px;color:var(--win95-text);text-align:center;min-width:200px;text-shadow:1px 1px 0 var(--win95-window-highlight);animation:popupAppear .3s ease-out}@keyframes popupAppear{0%{transform:translate(-50%,-50%) scale(.8);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.popup-content{font-size:20px;color:var(--text-color);line-height:1.6}.game-title{font-family:var(--font-heading);font-size:28px;margin-bottom:10px;text-align:center;color:var(--text-color);text-shadow:1px 1px 0 var(--win95-window-highlight);width:100%}.game-instructions{font-size:18px;margin:0 auto 20px;line-height:1.6;text-align:center;color:var(--text-color);padding:20px;background-color:var(--win95-window);border:2px solid var(--win95-window-border);box-shadow:inset -1px -1px 0 var(--win95-window-shadow),inset 1px 1px 0 var(--win95-window-highlight);width:100%;max-width:800px}.game-stats{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;background-color:var(--win95-window);border:2px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight);margin-bottom:16px;position:sticky;top:0;z-index:1;width:100%;box-sizing:border-box;font-family:var(--font-body);font-size:18px;color:var(--win95-text);box-shadow:inset -1px -1px 0 var(--win95-window-shadow),inset 1px 1px 0 var(--win95-window-highlight);height:48px}.game-stats>div{display:flex;align-items:center;justify-content:center;flex:1;text-align:center;white-space:nowrap;padding:0 12px;background-color:var(--win95-window);border:1px solid;border-color:var(--win95-shadow) var(--win95-highlight) var(--win95-highlight) var(--win95-shadow);margin:0 8px;height:32px;text-shadow:1px 1px 0 var(--win95-window-highlight);font-size:18px;min-width:120px}.game-stats .time{font-family:VT323,monospace;font-size:24px;color:var(--win95-text);text-align:center;width:100%;line-height:24px;background:linear-gradient(45deg,red,#f80,#ff0,#0f0,#00f,indigo,#8b00ff);background-size:400% 400%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:retroRainbow 4s linear infinite}.game-stats .score,.game-stats .unique-passwords{font-family:VT323,monospace;font-size:24px;color:var(--win95-text);text-align:center;width:100%;line-height:24px;text-shadow:2px 2px 0 var(--win95-window-highlight)}.stats-item{display:flex;align-items:center;justify-content:center;gap:12px;flex:1;text-align:center;background-color:var(--win95-window);border:1px solid;border-color:var(--win95-shadow) var(--win95-highlight) var(--win95-highlight) var(--win95-shadow);padding:6px 12px;margin:0 8px;height:32px;box-shadow:inset -1px -1px 0 var(--win95-window-shadow),inset 1px 1px 0 var(--win95-window-highlight);font-size:18px}.stats-label{font-weight:700;color:var(--win95-text);text-shadow:1px 1px 0 var(--win95-window-highlight);font-size:18px}.stats-value{color:var(--win95-text);text-shadow:1px 1px 0 var(--win95-window-highlight);font-size:18px}.password-input-container{display:flex;flex-direction:column;gap:12px;padding:16px;background-color:var(--win95-window);border:2px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight);margin-bottom:16px;width:100%;box-sizing:border-box;align-items:center}.password-input{width:100%;padding:8px;font-family:var(--font-body);font-size:16px;color:var(--win95-text);background-color:var(--win95-window);border:2px solid;border-color:var(--win95-shadow) var(--win95-highlight) var(--win95-highlight) var(--win95-shadow);box-shadow:inset -1px -1px 0 var(--win95-window-shadow),inset 1px 1px 0 var(--win95-window-highlight);box-sizing:border-box;text-shadow:1px 1px 0 var(--win95-window-highlight);transition:all .3s ease}.password-input:focus{outline:none;box-shadow:inset -1px -1px 0 var(--win95-window-shadow),inset 1px 1px 0 var(--win95-window-highlight),0 0 10px #007bff4d}.strength-meter{width:100%;height:20px;background-color:var(--win95-window);border:2px solid;border-color:var(--win95-shadow) var(--win95-highlight) var(--win95-highlight) var(--win95-shadow);margin:10px 0;position:relative;overflow:hidden}.strength-bar{height:100%;transition:width .3s ease,background-color .3s ease;background:linear-gradient(90deg,red,#ff6b6b,#ffd93d,#6bff6b,#00c853);background-size:200% 100%;animation:strengthPulse 2s infinite}@keyframes strengthPulse{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.strength-feedback{font-family:var(--font-body);font-size:14px;color:var(--win95-text);padding:8px 12px;background-color:var(--win95-window);border:2px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight);margin-bottom:16px;width:100%;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:1px 1px 0 var(--win95-window-highlight)}.strength-level{font-weight:700;margin-bottom:10px;font-size:20px}.feedback-messages{color:var(--text-color);margin-bottom:10px;line-height:1.6}.cracking-time{font-style:italic;font-size:18px}.last-password{font-size:18px;color:var(--text-color);margin-top:0;word-break:break-all;padding:15px;background-color:var(--win95-window);border:2px solid var(--win95-window-border);box-shadow:inset -1px -1px 0 var(--win95-window-shadow),inset 1px 1px 0 var(--win95-window-highlight)}.game-over{text-align:center;padding:20px;background-color:var(--win95-window);border:2px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight);margin:20px auto;width:100%;box-sizing:border-box}.final-score,.high-score{font-size:20px;margin-bottom:16px;color:var(--win95-text)}.unique-passwords{font-size:16px;margin-bottom:16px;color:var(--win95-text)}.buttons{display:flex;justify-content:center;gap:16px;margin-top:20px}.restart-button,.close-button{padding:8px 16px;font-family:var(--font-body);font-size:14px;color:var(--win95-text);background-color:var(--win95-button-face);border:2px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight);cursor:pointer;transition:all .2s ease;width:120px}.restart-button:hover,.close-button:hover{background-color:var(--win95-button-hover)}.restart-button:active,.close-button:active{background-color:var(--win95-button-active);border-color:var(--win95-shadow) var(--win95-highlight) var(--win95-highlight) var(--win95-shadow)}@media(max-width:850px){.password-game-container{width:95%;height:500px;padding:16px;margin:16px auto}.game-content{height:calc(100% - 80px);padding:0 4px 4px 0}.password-input-container{padding:12px}.game-stats{padding:8px 16px;height:40px;font-size:16px}.stats-item{padding:4px 8px;height:28px;gap:8px;font-size:16px}.game-stats>div{padding:0 8px;height:28px;margin:0 4px;font-size:16px}.stats-label,.stats-value{font-size:16px}.password-input{font-size:14px;padding:6px}.strength-feedback{font-size:12px;padding:6px 10px}.submit-button{font-size:12px;padding:6px 12px;width:160px}}.rainbow-text{background:linear-gradient(to right,red,orange,#ff0,green,#00f,indigo,violet);-webkit-background-clip:text;background-clip:text;color:transparent;animation:rainbow 3s linear infinite}@media(max-width:768px){.password-game-container{padding:var(--spacing-sm)}.game-title{font-size:24px}.game-instructions{font-size:16px;padding:15px}.password-input{font-size:14px;padding:10px}.game-stats{font-size:14px;padding:10px;flex-direction:column;gap:10px}.stats-item{width:100%;justify-content:center}.strength-meter{height:20px}.strength-feedback{font-size:12px;padding:10px}}.submit-button{padding:8px 16px;background-color:var(--win95-button);border:2px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight);color:var(--win95-text);font-family:var(--font-body);font-size:16px;cursor:pointer;transition:all .2s ease;text-shadow:1px 1px 0 var(--win95-window-highlight);display:flex;align-items:center;justify-content:center;margin:16px auto;width:200px;position:relative;overflow:hidden}.submit-button:hover{background-color:var(--win95-button-hover);transform:translateY(-2px)}.submit-button:active{transform:translateY(0);border-color:var(--win95-shadow) var(--win95-highlight) var(--win95-highlight) var(--win95-shadow)}.submit-button:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,#fff3,#fff0 70%);transform:rotate(45deg);transition:all .3s ease;opacity:0}.submit-button:hover:after{opacity:1;transform:rotate(45deg) translate(50%,50%)}.submit-button:disabled{background:var(--win95-button-face);color:var(--win95-window-shadow);cursor:not-allowed;border-color:var(--win95-window-shadow) var(--win95-window-highlight) var(--win95-window-highlight) var(--win95-window-shadow);box-shadow:inset 1px 1px 0 var(--win95-window-shadow),inset -1px -1px 0 var(--win95-window-highlight)}.start-button-container{display:flex;justify-content:center;align-items:center;margin:20px auto;width:100%;text-align:center}.start-button{padding:8px 16px;font-family:var(--font-body);font-size:14px;background:var(--win95-button-face);border:2px solid var(--win95-window-border);color:var(--text-color);cursor:pointer;transition:all .2s ease;box-shadow:inset -1px -1px 0 var(--win95-window-shadow),inset 1px 1px 0 var(--win95-window-highlight);width:200px;display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto}.start-button:hover{background:var(--win95-button-hover)}.start-button:active{background:var(--win95-button-active);border-color:var(--win95-window-shadow) var(--win95-window-highlight) var(--win95-window-highlight) var(--win95-window-shadow);box-shadow:inset 1px 1px 0 var(--win95-window-shadow),inset -1px -1px 0 var(--win95-window-highlight)}@media(max-width:768px){.start-button{font-size:12px;padding:6px 12px;max-width:160px}}.keyboard-music-game-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--win95-window);border:2px solid var(--win95-border-light);border-right-color:var(--win95-border-dark);border-bottom-color:var(--win95-border-dark);box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow);padding:10px;box-sizing:border-box;overflow:hidden}.game-screen{background:var(--win95-button-face);border:2px solid var(--win95-border-light);border-right-color:var(--win95-border-dark);border-bottom-color:var(--win95-border-dark);box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow);padding:10px;width:100%;max-width:800px;margin:0 auto;position:relative;min-height:400px;display:flex;flex-direction:column;align-items:center}.keyboard-display{display:flex;flex-direction:column;gap:4px;margin:10px 0;width:100%;position:relative;z-index:1;padding:0 10px}.key-row{display:flex;gap:2px;justify-content:center;width:100%;flex-wrap:wrap}.key{width:30px;height:30px;background:var(--win95-button-face);border:2px solid var(--win95-border-light);border-right-color:var(--win95-border-dark);border-bottom-color:var(--win95-border-dark);display:flex;align-items:center;justify-content:center;font-family:VT323,monospace;font-size:12px;color:var(--win95-text);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .1s ease;flex-shrink:0}.key:hover{background:#d4d4d4}.key.active{background:var(--win95-titlebar);color:var(--win95-text-inverse);border-color:var(--win95-titlebar);transform:translateY(1px)}.active-keys{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;min-height:40px;width:100%;justify-content:center;position:relative;z-index:1}.active-note{background:var(--win95-titlebar);color:var(--win95-text-inverse);padding:6px 12px;border-radius:3px;font-family:VT323,monospace;font-size:16px}.song-controls{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;width:100%;position:relative;z-index:1;padding:0 10px}.song-button{padding:6px 12px;background:var(--win95-button-face);border:2px solid var(--win95-border-light);border-right-color:var(--win95-border-dark);border-bottom-color:var(--win95-border-dark);box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow);font-family:VT323,monospace;font-size:14px;color:var(--win95-text);cursor:pointer;transition:all .2s ease;width:100%;max-width:200px;margin:0 auto;text-align:center}.song-button:hover{background:#d4d4d4;transform:translateY(-2px)}.song-button:active{background:var(--win95-button-face);border-color:var(--win95-border-dark);border-right-color:var(--win95-border-light);border-bottom-color:var(--win95-border-light);box-shadow:inset -1px -1px 0 var(--win95-button-highlight),inset 1px 1px 0 var(--win95-button-shadow);transform:translateY(1px)}.song-button.stop,.song-button.stop-all{background:var(--win95-titlebar);color:var(--win95-text-inverse)}.current-song{text-align:center;margin-top:8px;width:100%;position:relative;z-index:1;padding:0 10px}.current-song h3{margin:0 0 4px;font-family:VT323,monospace;color:var(--win95-text);font-size:16px}.song-progress{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;width:100%;padding:0 10px}.note-indicator{background:var(--win95-button-face);border:2px solid var(--win95-border-light);border-right-color:var(--win95-border-dark);border-bottom-color:var(--win95-border-dark);padding:2px 4px;font-family:VT323,monospace;color:var(--win95-text);font-size:10px;flex-shrink:0}.note-indicator.current{background:var(--win95-titlebar);color:var(--win95-text-inverse);border-color:var(--win95-titlebar);transform:translateY(1px)}.close-button{position:right;top:5px;right:5px;padding:4px 8px;background:var(--win95-button-face);border:2px solid var(--win95-border-light);border-right-color:var(--win95-border-dark);border-bottom-color:var(--win95-border-dark);box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow);font-family:VT323,monospace;font-size:14px;color:var(--win95-text);cursor:pointer;transition:all .2s ease;z-index:2}.close-button:hover{background:#d4d4d4;transform:translateY(-2px)}.close-button:active{background:var(--win95-button-face);border-color:var(--win95-border-dark);border-right-color:var(--win95-border-light);border-bottom-color:var(--win95-border-light);box-shadow:inset -1px -1px 0 var(--win95-button-highlight),inset 1px 1px 0 var(--win95-button-shadow);transform:translateY(1px)}.floating-cat{position:absolute;pointer-events:none;z-index:0;filter:drop-shadow(2px 2px 2px rgba(0,0,0,.5));border:none;background:none;padding:0;margin:0;background-color:transparent!important}.floating-cat img{width:50px;height:50px;object-fit:contain;border:none;background:none;padding:0;margin:0;display:block;background-color:transparent!important}.ux-banner{position:fixed;top:40px;left:50%;transform:translate(-50%);background:var(--win95-titlebar);padding:6px 12px;font-family:VT323,monospace;font-size:18px;border:2px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight);box-shadow:inset -1px -1px 0 var(--win95-window-shadow),inset 1px 1px 0 var(--win95-window-highlight);z-index:1000;white-space:nowrap;cursor:pointer;transition:all .2s ease;text-shadow:1px 1px 0 var(--win95-button-highlight);animation:retroFloat 3s ease-in-out infinite;letter-spacing:1px}.ux-banner:active{animation:disappear .3s ease-out forwards}.ux-banner span{background:linear-gradient(45deg,red,#f80,#ff0,#0f0,#00f,indigo,#8b00ff);background-size:400% 400%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:retroRainbow 4s linear infinite}@keyframes retroFloat{0%{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-8px)}to{transform:translate(-50%) translateY(0)}}@keyframes disappear{0%{opacity:1}to{opacity:0;pointer-events:none}}@keyframes retroRainbow{0%{background-position:0% 50%;filter:brightness(1)}50%{background-position:100% 50%;filter:brightness(1.2)}to{background-position:0% 50%;filter:brightness(1)}}@media(min-width:600px){.keyboard-music-game-container{padding:20px}.game-screen{padding:20px;min-height:500px}.keyboard-display{padding:0 20px}.key{width:40px;height:40px;font-size:16px}.song-controls{padding:0 20px}.song-button{padding:10px 20px;font-size:18px;max-width:300px}.current-song,.song-progress{padding:0 20px}.note-indicator{padding:6px 12px;font-size:14px}.current-song h3{font-size:20px}.close-button{padding:6px 12px;font-size:16px}}@media(min-width:400px)and (max-width:599px){.key{width:35px;height:35px;font-size:14px}.floating-cat img{width:60px;height:60px}}@media(max-width:399px){.key{width:30px;height:30px;font-size:12px}.floating-cat img{width:50px;height:50px}.close-button{padding:3px 6px;font-size:12px}}.abc-game-container{width:800px;height:600px;margin:0 auto;padding:24px;background-color:var(--win95-window);border:2px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight);box-shadow:inset -1px -1px 0 var(--win95-window-shadow),inset 1px 1px 0 var(--win95-window-highlight),0 0 20px #0003;font-family:var(--font-body);color:var(--win95-text);display:flex;flex-direction:column;position:relative;overflow:hidden;box-sizing:border-box;transform:translateY(50%);top:-300px}.game-start{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:24px}.game-title{font-family:var(--font-heading);font-size:36px;margin-bottom:10px;text-align:center;color:var(--text-color);text-shadow:2px 2px 0 var(--win95-window-highlight);width:100%;background:linear-gradient(45deg,red,#f80,#ff0,#0f0,#00f,indigo,#8b00ff);background-size:400% 400%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rainbow 8s linear infinite}@keyframes rainbow{0%{background-position:0% 50%}to{background-position:100% 50%}}.game-instructions{font-size:20px;margin:0 auto 20px;line-height:1.6;text-align:center;color:var(--text-color);padding:20px;background-color:var(--win95-window);border:2px solid var(--win95-window-border);box-shadow:inset -1px -1px 0 var(--win95-window-shadow),inset 1px 1px 0 var(--win95-window-highlight);width:100%;max-width:600px}.mode-buttons{display:flex;gap:16px;margin-top:20px}.mode-button{padding:16px 32px;background-color:var(--win95-button);border:2px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight);color:var(--win95-text);font-family:var(--font-body);font-size:24px;cursor:pointer;transition:all .2s ease;text-shadow:1px 1px 0 var(--win95-window-highlight);position:relative;overflow:hidden}.mode-button:hover{background-color:var(--win95-button-hover);transform:translateY(-2px)}.mode-button:active{transform:translateY(0);border-color:var(--win95-shadow) var(--win95-highlight) var(--win95-highlight) var(--win95-shadow)}.game-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:24px}.game-stats{display:flex;justify-content:space-between;width:100%;padding:12px 24px;background-color:var(--win95-window);border:2px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight);margin-bottom:16px;font-family:VT323,monospace;font-size:24px;color:var(--win95-text);text-shadow:2px 2px 0 var(--win95-window-highlight)}.current-item{font-family:VT323,monospace;font-size:160px;color:var(--win95-text);text-shadow:4px 4px 0 var(--win95-window-highlight);margin:20px 0;animation:bounce 1s infinite;background:linear-gradient(45deg,red,#f80,#ff0,#0f0,#00f,indigo,#8b00ff);background-size:400% 400%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rainbow 8s linear infinite,bounce 1s infinite}.pronunciation{font-family:VT323,monospace;font-size:32px;color:var(--win95-text);text-shadow:2px 2px 0 var(--win95-window-highlight);margin:10px 0;padding:10px 20px;background-color:var(--win95-window);border:2px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight);border-radius:4px}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.feedback-message{font-family:VT323,monospace;font-size:32px;color:var(--win95-text);text-shadow:2px 2px 0 var(--win95-window-highlight);margin:20px 0;animation:fadeInOut 1.5s ease-in-out}@keyframes fadeInOut{0%{opacity:0;transform:scale(.8)}20%{opacity:1;transform:scale(1.1)}80%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.instructions{font-family:var(--font-body);font-size:20px;color:var(--win95-text);text-align:center;margin-top:20px;padding:10px;background-color:var(--win95-window);border:2px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight)}.game-over{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:24px}.final-score{font-family:VT323,monospace;font-size:32px;color:var(--win95-text);text-shadow:2px 2px 0 var(--win95-window-highlight);margin:20px 0}.buttons{display:flex;gap:16px;margin-top:20px}.restart-button,.close-button{padding:16px 32px;background-color:var(--win95-button);border:2px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight);color:var(--win95-text);font-family:var(--font-body);font-size:24px;cursor:pointer;transition:all .2s ease;text-shadow:1px 1px 0 var(--win95-window-highlight)}.restart-button:hover,.close-button:hover{background-color:var(--win95-button-hover);transform:translateY(-2px)}.restart-button:active,.close-button:active{transform:translateY(0);border-color:var(--win95-shadow) var(--win95-highlight) var(--win95-highlight) var(--win95-shadow)}.ux-banner{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:var(--win95-titlebar);padding:4px 12px;height:24px;line-height:24px;font-family:VT323,monospace;font-size:14px;border:1px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight);box-shadow:inset -1px -1px 0 var(--win95-window-shadow),inset 1px 1px 0 var(--win95-window-highlight),0 2px 4px #0003;z-index:1000;white-space:nowrap;cursor:pointer;transition:all .2s ease;text-shadow:1px 1px 0 var(--win95-button-highlight);animation:retroFloat 3s ease-in-out infinite;letter-spacing:.5px;min-width:200px;text-align:center;opacity:.9;display:flex;align-items:center;justify-content:center}.ux-banner.blinking{animation:blink .5s steps(2,start) 6,retroFloat 3s ease-in-out infinite}@keyframes blink{to{visibility:hidden}}.ux-banner:hover{opacity:1;transform:translate(-50%) scale(1.05)}.ux-banner:active{transform:translate(-50%) scale(.95)}@keyframes retroFloat{0%{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-2px)}to{transform:translate(-50%) translateY(0)}}.ux-banner span{background:linear-gradient(45deg,red,#f80,#ff0,#0f0,#00f,indigo,#8b00ff);background-size:400% 400%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:retroRainbow 4s linear infinite;display:inline-block;padding:0;line-height:1;font-weight:700}@keyframes retroRainbow{0%{background-position:0% 50%}to{background-position:100% 50%}}.go-back-button{position:absolute;top:20px;left:20px;padding:8px 16px;background-color:var(--win95-button);border:2px solid;border-color:var(--win95-highlight) var(--win95-shadow) var(--win95-shadow) var(--win95-highlight);color:var(--win95-text);font-family:var(--font-body);font-size:16px;cursor:pointer;transition:all .2s ease;text-shadow:1px 1px 0 var(--win95-window-highlight);z-index:100}.go-back-button:hover{background-color:var(--win95-button-hover);transform:translateY(-2px)}.go-back-button:active{transform:translateY(0);border-color:var(--win95-shadow) var(--win95-highlight) var(--win95-highlight) var(--win95-shadow)}:root{--font-heading: "Press Start 2P", cursive;--font-body: "Microsoft Sans Serif", Tahoma, Verdana, Geneva, sans-serif;--font-pixel: "VT323", monospace;--win95-desktop: #008080;--win95-window: #c0c0c0;--win95-titlebar: #000080;--win95-titlebar-text: #ffffff;--win95-text: #000000;--win95-border: #000000;--win95-button-face: #c0c0c0;--win95-button-highlight: #ffffff;--win95-button-shadow: #808080;--win95-button-dark: #404040;--win95-button-active: #808080;--win95-button-hover: #d4d4d4;--win95-window-border: #404040;--win95-window-highlight: #ffffff;--win95-window-shadow: #808080;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 2rem;--spacing-xl: 4rem;--border-radius-sm: 4px;--border-radius-md: 8px;--border-radius-lg: 16px;--transition-fast: .2s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--max-width: 1200px;--container-padding: var(--spacing-md)}*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{height:100%;width:100%;overflow-x:hidden}body{font-family:var(--font-body);background-color:var(--win95-desktop);background-image:url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h1v1H0V0zm2 2h1v1H2V2z' fill='%23000000' fill-opacity='0.1'/%3E%3C/svg%3E");color:var(--win95-text);line-height:1.6;margin:0;padding:0}.window{background:var(--win95-window);border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow);padding:8px;margin:8px}.window-titlebar{background:var(--win95-titlebar);color:var(--win95-titlebar-text);padding:4px 8px;font-family:var(--font-heading);font-size:12px;text-transform:uppercase;letter-spacing:1px;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--win95-button-shadow)}.window-content{background:var(--win95-window);padding:8px;border:2px solid;border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow);box-shadow:inset 1px 1px 0 var(--win95-button-shadow),inset -1px -1px 0 var(--win95-button-highlight)}.win95-btn{padding:4px 8px;background:var(--win95-button-face);border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);color:var(--win95-text);font-family:var(--font-body);font-size:14px;cursor:pointer;box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow);text-shadow:1px 1px 0 var(--win95-button-highlight)}.win95-btn:hover{background:var(--win95-button-hover);border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow);box-shadow:inset -1px -1px 0 var(--win95-button-highlight),inset 1px 1px 0 var(--win95-button-shadow)}.win95-btn:active{background:var(--win95-button-active);border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow);box-shadow:inset -1px -1px 0 var(--win95-button-highlight),inset 1px 1px 0 var(--win95-button-shadow);transform:translateY(1px)}.win95-input,.win95-textarea{padding:4px 8px;background:var(--win95-window);border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);color:var(--win95-text);font-family:var(--font-body);font-size:14px;box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow)}.win95-input:focus,.win95-textarea:focus{outline:none;border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow);box-shadow:inset -1px -1px 0 var(--win95-button-highlight),inset 1px 1px 0 var(--win95-button-shadow)}::-webkit-scrollbar{width:16px;height:16px;background:var(--win95-window)}::-webkit-scrollbar-thumb{background:var(--win95-button-face);border:1px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow)}::-webkit-scrollbar-thumb:hover{background:var(--win95-button-face);border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow)}::-webkit-scrollbar-button{width:16px;height:16px;background:var(--win95-button-face);border:1px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow)}::selection{background:var(--win95-titlebar);color:var(--win95-titlebar-text)}a{color:var(--win95-text);text-decoration:none;border-bottom:1px dotted var(--win95-button-shadow);transition:all .2s ease}a:hover{border-bottom:1px solid var(--win95-button-shadow);text-shadow:1px 1px 0px var(--win95-button-highlight)}ul,ol{list-style:none;padding-left:0;margin:0}li{margin:.25rem 0;position:relative;padding-left:0}li:before{display:none}table{border-collapse:collapse;width:100%;margin:1rem 0;background:var(--win95-window);border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow)}th,td{padding:.5rem;border:1px solid var(--win95-button-shadow);text-align:left}th{background:var(--win95-button-face);font-weight:700;border-bottom:2px solid var(--win95-button-shadow)}input,textarea,select{background:var(--win95-window);border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);padding:4px 8px;font-family:var(--font-body);font-size:16px;color:var(--win95-text);box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow)}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow);box-shadow:inset -1px -1px 0 var(--win95-button-highlight),inset 1px 1px 0 var(--win95-button-shadow)}input[type=checkbox],input[type=radio]{appearance:none;width:16px;height:16px;border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);background:var(--win95-window);box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow);margin-right:8px;position:relative;cursor:pointer}input[type=checkbox]:checked,input[type=radio]:checked{background:var(--win95-window);border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow);box-shadow:inset -1px -1px 0 var(--win95-button-highlight),inset 1px 1px 0 var(--win95-button-shadow)}input[type=checkbox]:checked:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px;color:var(--win95-text)}input[type=radio]:checked:after{content:"●";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:8px;color:var(--win95-text)}[data-tooltip]{position:relative}[data-tooltip]:before{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translate(-50%);padding:4px 8px;background-color:var(--win95-window);border:1px solid var(--win95-button-shadow);color:var(--win95-text);font-size:12px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s ease;z-index:1000;box-shadow:2px 2px 0 var(--win95-button-shadow)}[data-tooltip]:hover:before{opacity:1}.progress-bar{width:100%;height:20px;background-color:var(--win95-window);border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow);overflow:hidden}.progress-bar-fill{height:100%;background-color:var(--win95-titlebar);transition:width .3s ease}@keyframes win95-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.loading{position:relative;overflow:hidden}.loading:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:win95-loading 1.5s infinite}.error-message{background-color:red;color:#fff;padding:8px;margin:8px 0;border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow);font-family:var(--font-body);font-size:16px}.success-message{background-color:#0f0;color:#000;padding:8px;margin:8px 0;border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow);font-family:var(--font-body);font-size:16px}.warning-message{background-color:#ff0;color:#000;padding:8px;margin:8px 0;border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);box-shadow:inset 1px 1px 0 var(--win95-button-highlight),inset -1px -1px 0 var(--win95-button-shadow);font-family:var(--font-body);font-size:16px}.start-menu{position:fixed;bottom:0;left:0;background:var(--win95-window);border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);padding:4px;display:none;z-index:1001;box-shadow:2px 2px 0 var(--win95-button-shadow);min-width:200px}.start-menu.active{display:block}.start-menu-item{padding:4px 8px;display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--win95-text);font-family:var(--font-body);font-size:16px}.start-menu-item:hover{background-color:var(--win95-titlebar);color:var(--win95-titlebar-text)}.start-menu-item img{width:16px;height:16px;image-rendering:pixelated}.desktop-icons{display:grid;grid-template-columns:repeat(auto-fill,80px);gap:16px;padding:16px}.window-focused{border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);box-shadow:2px 2px 0 var(--win95-button-shadow)}.window-unfocused{border-color:var(--win95-button-shadow) var(--win95-button-highlight) var(--win95-button-highlight) var(--win95-button-shadow);box-shadow:1px 1px 0 var(--win95-button-shadow)}.context-menu{position:fixed;background:var(--win95-window);border:2px solid;border-color:var(--win95-button-highlight) var(--win95-button-shadow) var(--win95-button-shadow) var(--win95-button-highlight);padding:4px;z-index:1002;box-shadow:2px 2px 0 var(--win95-button-shadow);min-width:150px}.context-menu-item{padding:4px 8px;cursor:pointer;color:var(--win95-text);font-family:var(--font-body);font-size:16px;display:flex;align-items:center;gap:8px}.context-menu-item:hover{background-color:var(--win95-titlebar);color:var(--win95-titlebar-text)}.context-menu-separator{height:1px;background-color:var(--win95-button-shadow);margin:4px 0}.resize-handle{position:absolute;bottom:0;right:0;width:16px;height:16px;cursor:nwse-resize;background:linear-gradient(45deg,transparent 50%,var(--win95-button-shadow) 50%),linear-gradient(-45deg,transparent 50%,var(--win95-button-highlight) 50%);background-size:8px 8px;background-position:0 0,8px 0;background-repeat:no-repeat}.title-bar-buttons{display:flex;gap:2px}.title-bar-button{width:16px;height:14px;border:1px solid var(--win95-titlebar-text);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--win95-titlebar-text);cursor:pointer;background:var(--win95-titlebar)}.title-bar-button:hover{background-color:var(--win95-titlebar-text);color:var(--win95-titlebar)}.window-drag-handle{cursor:move;-webkit-user-select:none;user-select:none}@media(max-width:768px){:root{--container-padding: var(--spacing-sm)}body{font-size:16px}h1{font-size:1.8rem}h2{font-size:1.5rem}h3{font-size:1.3rem}}