*,*:before,*:after{box-sizing:border-box}*{margin:0}html,body{height:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}body{padding:16px;font-family:Wotfard,sans-serif}table{width:100%;border-collapse:collapse}th{text-align:left;border-bottom:3px solid hsl(0deg 0% 25%)}th[scope=col]{text-align:right;border-right:3px solid hsl(0deg 0% 25%);border-bottom:none;padding-right:8px}tr:not(:last-of-type) th[scope=col],tr:not(:last-of-type) td{border-bottom:1px solid hsl(0deg 0% 50%)}@font-face{font-family:Wotfard;src:url(https://sandpack-bundler.vercel.app/fonts/wotfard/wotfard-semibold-webfont.woff2) format("woff2");font-weight:600;font-style:normal;font-display:fallback}@font-face{font-family:Wotfard;src:url(https://sandpack-bundler.vercel.app/fonts/wotfard/wotfard-medium-webfont.woff2) format("woff2");font-weight:500;font-style:normal;font-display:fallback}@font-face{font-family:Wotfard;src:url(https://sandpack-bundler.vercel.app/fonts/wotfard/wotfard-regular-webfont.woff2) format("woff2");font-weight:400;font-style:normal;font-display:fallback}:root{--shadow-color: 5deg 37% 71%;--shadow-elevation-low: 0px -.3px .2px hsl(var(--shadow-color) / .38), 0px -.4px .3px -2.5px hsl(var(--shadow-color) / .25), 0px -1px .8px -5px hsl(var(--shadow-color) / .13);--shadow-elevation-medium: 0px -.3px .2px hsl(var(--shadow-color) / .39), 0px -.5px .4px -1.7px hsl(var(--shadow-color) / .3), 0px -1.6px 1.2px -3.3px hsl(var(--shadow-color) / .2), 0px -4.8px 3.6px -5px hsl(var(--shadow-color) / .1);--shadow-elevation-high: 0px 1px 1.5px hsl(var(--shadow-color) / .6), 0px 2px 3px hsl(var(--shadow-color) / .4), 0px 4px 6px hsl(var(--shadow-color) / .25), 0px 8px 12px hsl(var(--shadow-color) / .15), 0px 16px 24px hsl(var(--shadow-color) / .1)}@media (prefers-color-scheme: dark){:root{--shadow-color: 355deg 73% 29%}}body{padding:4px;background:#ffd9d6}@media (prefers-color-scheme: dark){body{background:#1c1c1c;color:#fff}}html,body,#root{height:100dvh;max-height:100%}.wrapper{height:100dvh;max-height:100%;display:flex;flex-direction:column;gap:32px}.list-wrapper{flex:1;overflow-y:auto}.shopping-list{box-shadow:var(--shadow-elevation-high);padding:0;margin:0 auto;max-width:400px;list-style-type:none}.shopping-list .shopping-list-item{display:flex;align-items:center;justify-content:space-between;padding:10px;background-color:#fff;border-radius:4px;margin-bottom:8px}@media (prefers-color-scheme: dark){.shopping-list .shopping-list-item{background:#000}}.shopping-list-item .shopping-list-item-label{flex-grow:1}.shopping-list-item .shopping-list-item-controls{display:flex;align-items:center}.shopping-list li::marker{color:#e96c63}.new-list-item-form{background:#fff;box-shadow:var(--shadow-elevation-high);padding:4px;border-radius:8px;margin-top:auto}.new-list-item-form form{border:2px dashed hsl(4deg 75% 65%);border-radius:4px;padding:16px;text-align:center}@media (prefers-color-scheme: dark){.new-list-item-form{background:#000}.new-list-item-form form{border:2px dashed hsl(4deg 75% 65%)}}.row{display:flex;flex-wrap:wrap;gap:8px}label{display:block;margin-bottom:16px;font-size:1.125rem;font-weight:500}.row input,.row button{height:2.5rem;font-size:1.125rem}.row input{flex:4;min-width:220px}.row button{flex:1;min-width:90px}@media (prefers-color-scheme: dark){.row input{background:#3b3b3b;color:#fff;border-color:#ff69b4}.row button{background-color:#ff69b4;border:hidden}.remove-button{color:#ff69b4}}.remove-button{color:#000;margin-left:10px;background:none;border:none;cursor:pointer;font-weight:700;float:right}.reorder-handle{cursor:grab;display:block;margin-right:10px;float:right}@media (prefers-color-scheme: dark){.remove-button{color:#ff69b4}span.reorder-handle svg{fill:#ff69b4}}.dragging{cursor:grabbing;opacity:.7}
