:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;min-width:320px;min-height:100vh;box-sizing:border-box}h1{font-size:2rem;line-height:.5}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.wrapper{width:100dvw}.header{width:100dvw;padding:.5rem;text-align:center;border-bottom:1px solid grey}.listItem{display:grid;grid-template-areas:"itemName itemName itemName itemName" "qtyLabel priceLabel add delete" "quantity price add delete";grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:auto auto auto;gap:.2rem;align-items:center;border-bottom:1px solid grey;padding:.5rem .3rem;text-align:center}.listItem.inactive{color:gray}.listItem .name{grid-area:itemName;text-align:start;font-size:1.2rem;font-weight:700}.listItem .name.strikethrough{text-decoration:line-through}.listItem .label:first{grid-area:qtyLabel;display:block;font-size:.8rem}.listItem .label:last-of-type{grid-area:priceLabel;display:block;font-size:.8rem}.listItem .quantity{grid-area:quantity}.listItem .price{grid-area:price}.listItem .add{grid-area:add}.listItem .delete{grid-area:delete}.listItem .quantity input,.listItem .price input{width:100%;max-width:100px;box-sizing:border-box;padding:.2rem;text-align:center;border:1px solid #ccc;border-radius:4px}@media(min-width:768px){.listItem{grid-template-areas:"itemName itemName qtyLabel priceLabel add delete" "itemName itemName quantity price add delete";grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr;grid-template-rows:auto auto;gap:.5rem;padding:.5rem}.listItem .name{text-align:center}.listItem .label:first-of-type,.listItem .label:last-of-type{font-size:.9rem;font-weight:700}.listItem .quantity input,.listItem .price input{max-width:120px;padding:.3rem}.listItem .add,.listItem .delete{padding:.4rem .8rem;font-size:.9rem}}@media(min-width:1024px){.listItem{grid-template-areas:"itemName qtyLabel priceLabel add delete" "itemName quantity price add delete";grid-template-columns:3fr 1fr 1fr 1fr 1fr;grid-template-rows:auto auto;gap:.5rem 1rem;padding:.7rem}.listItem .label:first-of-type{grid-area:qtyLabel;font-size:.8rem;font-weight:700;margin-bottom:-.5rem}.listItem .label:last-of-type{grid-area:priceLabel;font-size:.8rem;font-weight:700;margin-bottom:-.5rem}.listItem .name{grid-area:itemName;text-align:start;font-size:1.1rem;align-self:center}.listItem .quantity{grid-area:quantity}.listItem .price{grid-area:price}.listItem .add,.listItem .delete{padding:.5rem 1rem;font-size:1rem;transition:all .2s ease}.listItem .add:hover,.listItem .delete:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}}@media(min-width:1440px){.listItem{grid-template-columns:4fr 1fr 1fr 1fr 1fr;padding:1rem}.listItem .quantity input,.listItem .price input{max-width:160px}}.shoppingList{max-width:100%;box-sizing:border-box;margin:.5rem 0;padding:.5rem;border:1px solid grey;display:flex;flex-direction:column}.createItem{margin:.5rem;display:flex;gap:.5rem}.createItem input{height:2rem;width:70dvw}