*{-webkit-tap-highlight-color:transparent!important;-webkit-touch-callout:none!important;-webkit-user-select:none!important;user-select:none!important}button,a{-webkit-tap-highlight-color:transparent!important;-webkit-touch-callout:none!important;-webkit-user-select:none!important;user-select:none!important;touch-action:manipulation}.header{background-color:#fff;box-shadow:var(--shadow-sm);padding:1.5rem 0;position:sticky;top:0;z-index:100;width:100vw;min-width:100vw;height:clamp(4rem,10vh,10rem);margin:0;left:0;right:0;height:13rem;border-bottom:2px solid var(--border-color);display:flex;align-items:center;overflow-x:hidden}.nav-container{width:100%;max-width:1440px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:clamp(1rem,2vw,1rem);padding:0 max(2rem,calc((100vw - 1440px)/2));box-sizing:border-box}.nav-group{display:flex;gap:clamp(1.5rem,3vw,2rem);align-items:center;min-width:clamp(150px,20vw,200px)}.header-title{font-family:Rubik Bubbles,system-ui;font-size:clamp(5rem,5vw,4rem);margin:0;color:var(--color-primary);text-transform:uppercase;transition:transform .2s ease;flex-shrink:0}.header-title:hover{transform:scale(1.05)}.nav-link{color:var(--color-secondary);text-decoration:none;font-family:var(--font-main);font-size:clamp(1.5rem,2vw,1.9rem);font-weight:var(--fw-medium);padding:clamp(.5rem,1vw,1rem) clamp(.8rem,1.5vw,1.2rem);border-radius:8px;color:#fff;transition:all .2s ease;white-space:nowrap;letter-spacing:.03em;text-transform:uppercase}.nav-link:hover{color:var(--color-dark);color:#fff}button.nav-link{background:none;border:none;cursor:pointer;font-family:inherit}.hamburger-menu{display:none;background:none;border:none;cursor:pointer;padding:.5rem;z-index:1000}.hamburger-menu:focus .hamburger-line{outline:none}.hamburger-menu.open .hamburger-line{outline:none}.hamburger-line{display:block;width:25px;height:3px;margin:5px 0;background-color:var(--color-secondary);transition:all .3s ease}.mobile-nav{display:none}@media (max-width: 768px){.desktop-nav{display:none}.hamburger-menu{display:block}.header{padding:1rem 0;height:auto;min-height:8rem}.nav-container{padding:0 1rem;width:100%;margin:0}.mobile-nav{width:100vw;max-width:250px;right:-100vw}.mobile-nav.open{right:0}.mobile-nav .nav-link{font-size:1.4rem;padding:1rem;width:100%;text-align:left}.header-title{margin:0 auto}}@media (max-width: 480px){.header{padding:.8rem 0;min-height:6rem}.nav-container{padding:0 .8rem}.header-title{font-size:clamp(2rem,8vw,2.5rem)}}.color-picker{width:100%;max-width:600px;background:var(--background-main);padding:2rem;border-radius:8px;margin:.1rem auto}.color-grid{display:flex;flex-direction:row;gap:.5rem;justify-content:center;flex-wrap:wrap}.color-column{display:flex;flex-direction:column;gap:.5rem}.color-button{width:2.5rem;height:2.5rem;border:none;border-radius:50%;cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow-sm)}.color-button:hover{transform:scale(1.1);box-shadow:var(--shadow-md)}.color-button:focus{outline:2px solid white;outline-offset:2px}.color-button.selected{transform:scale(1.1)}.reset-grid{display:flex;align-items:center;justify-content:center;margin-top:2rem;padding:.5rem}.reset-button{background-color:#fff;color:var(--color-primary);padding:0 .5rem;font-size:1.3rem;font-weight:700;border-radius:4px;box-shadow:var(--shadow-sm);border:none;outline:none}.reset-button:hover{color:#000;outline:none;border:none;box-shadow:var(--shadow-md)}.reset-button:focus{outline:none;border:none}.reset-button:focus-visible{outline:none;border:none}.floating-color-ball{position:fixed;width:20px;height:20px;border-radius:50%;pointer-events:none;z-index:9999;box-shadow:var(--shadow-sm);transform:translate(-50%,-50%);transition:opacity .2s ease;opacity:.8}.floating-color-ball.hidden{opacity:0}.knitting-grid-container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:1200px;gap:2rem;padding:2rem;margin:0 auto}.grid-wrapper{overflow:auto;display:flex;justify-content:center;align-items:center;width:fit-content;height:fit-content;margin:0 auto;padding:2rem;background-color:#fff;border-radius:8px;box-shadow:var(--shadow-sm)}.grid{display:grid;background-color:#dcdcdc;width:fit-content;height:fit-content;margin:-10px auto 0}.grid-cell{width:100%;height:100%;border:1px solid gainsboro;background-color:#fff;transition:all .2s ease;cursor:pointer;aspect-ratio:.6;margin:-1px -.4px;position:relative}.grid-cell:nth-child(20n+1),.grid-cell:nth-child(20n+3),.grid-cell:nth-child(20n+5),.grid-cell:nth-child(20n+7),.grid-cell:nth-child(20n+9),.grid-cell:nth-child(20n+11),.grid-cell:nth-child(20n+13),.grid-cell:nth-child(20n+15),.grid-cell:nth-child(20n+17),.grid-cell:nth-child(20n+19){transform:skew(-10deg);border-radius:10px 0;margin-right:-1px;z-index:0}.grid-cell:nth-child(20n+2),.grid-cell:nth-child(20n+4),.grid-cell:nth-child(20n+6),.grid-cell:nth-child(20n+8),.grid-cell:nth-child(20n+10),.grid-cell:nth-child(20n+12),.grid-cell:nth-child(20n+14),.grid-cell:nth-child(20n+16),.grid-cell:nth-child(20n+18),.grid-cell:nth-child(20n+20){transform:skew(10deg);border-radius:0 10px;margin-left:-1px;z-index:1}.grid-cell:hover{filter:brightness(.95);z-index:2}.grid-controls{display:flex;flex-direction:column;gap:1rem;justify-content:center;align-items:center;padding:1rem;background-color:#fff;border-radius:8px;box-shadow:var(--shadow-sm);width:fit-content}.input-group{display:flex;align-items:center;gap:.5rem}.input-group label{font-family:var(--font-main);font-size:1.2rem;color:var(--color-secondary);font-weight:var(--fw-medium)}.input-group input{width:4rem;padding:.5rem;border:1px solid var(--color-accent);border-radius:4px;font-family:var(--font-main);font-size:1.2rem;color:var(--color-secondary);text-align:center}.input-group input:focus{outline:none;border-color:var(--color-secondary)}.height-adjuster{grid-area:height-control;display:flex;align-items:center;justify-content:flex-end;padding-right:.3rem;height:100%;margin:auto 0}.width-adjuster{grid-area:width-control;display:flex;align-items:center;justify-content:center;padding-top:.3rem;transform:translate(1.25rem)}.adjuster-controls{display:flex;align-items:center;gap:.5rem;background-color:#fff;padding:.5rem;border-radius:8px;box-shadow:var(--shadow-sm)}.adjuster-controls.vertical{flex-direction:column;padding:.5rem}.adjuster-button{background:none;border:none;cursor:pointer;font-size:1.5rem;color:var(--color-secondary);padding:.5rem;transition:all .2s ease;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:4px}.adjuster-button:hover{color:var(--color-dark);background-color:var(--color-accent)}.dimension-display{font-family:var(--font-main);font-size:1.2rem;min-width:2ch;text-align:center;color:var(--color-secondary);font-weight:var(--fw-medium)}.dimension-controls{display:flex;gap:2rem;align-items:center}.preset-buttons{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;padding-top:.5rem}.preset-button{background-color:#fff;color:var(--color-secondary);padding:.5rem 1rem;font-size:1rem;font-family:var(--font-main);font-weight:var(--fw-medium);border:1px solid var(--color-accent);border-radius:4px;cursor:pointer;transition:all .2s ease;outline:none}.preset-button:hover{color:var(--color-dark);transform:translateY(-1px);box-shadow:var(--shadow-sm);outline:none;border:1px solid var(--color-accent)}.preset-button:focus{outline:none;border:1px solid var(--color-accent)}.preset-button:focus-visible{outline:none;border:1px solid var(--color-accent)}.preset-button:active{transform:translateY(0);outline:none}.footer-link{font-size:.8rem;text-decoration:none;color:var(--color-accent)}.footer-link:hover{font-size:.8rem;text-decoration:none;color:#000;transition:all .2s ease}:root{--font-heading: "Rubik Bubbles", system-ui;--font-main: "Poppins", sans-serif;--font-mono: "Poppins", sans-serif;--font-sans: "Poppins", sans-serif;--fw-light: 300;--fw-regular: 400;--fw-medium: 500;--fw-semibold: 600;--fw-bold: 700;--fw-extrabold: 800;--fw-black: 900;--color-primary: #f2bbae;--color-secondary: #bf8069;--color-accent: #e8d4c6;--color-dark: #000;--color-background: #f2f2f2;--text-primary: var(--color-primary);--text-secondary: var(--color-secondary);--background-main: var(--color-background);--background-accent: var(--color-dark);--border-color: var(--color-dark);--hover-primary: #e8d4c6;--hover-secondary: #b48e7a;--shadow-sm: 0 1px 2px rgba(100, 121, 140, .1);--shadow-md: 0 2px 4px rgba(100, 121, 140, .15);--shadow-lg: 0 4px 6px rgba(100, 121, 140, .2)}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--background-main);color:var(--text-primary);margin:0;padding:0;width:100%;min-width:100%;overflow-x:hidden;font-family:var(--font-main);font-weight:var(--fw-regular);letter-spacing:.02em}.app{min-height:100vh;width:100%;min-width:100%;display:flex;flex-direction:column;overflow-x:hidden;background-color:var(--background-main)}.main-content{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;box-sizing:border-box;background-color:var(--background-main)}h1{font-family:Rubik Bubbles,system-ui;font-size:4.5rem;text-transform:uppercase;margin:0;padding:0;text-align:center;letter-spacing:.01em;color:var(--color-primary)}h1:hover{transform:scale(1.02);color:var(--hover-primary)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.btn{padding:.6em 1.2em;border-radius:8px;border:1px solid transparent;font-size:.9em;font-weight:var(--fw-medium);font-family:var(--font-main);cursor:pointer;transition:all .25s ease;text-transform:uppercase;letter-spacing:.03em}.btn-primary{background-color:var(--color-primary);color:var(--color-background)}.btn-primary:hover{background-color:var(--hover-primary)}.btn-secondary{background-color:var(--color-secondary);color:var(--color-background)}.btn-secondary:hover{background-color:var(--hover-secondary)}.card{padding:2em;background-color:#fff;border-radius:8px;box-shadow:var(--shadow-md);border:1px solid var(--border-color)}.read-the-docs{color:#888}@media (max-width: 768px){.main-content{padding:1rem;width:100vw;min-width:100vw;margin:0;overflow-x:hidden}}@media (max-width: 480px){.main-content{padding:.5rem}}