*{box-sizing:border-box}:root{--page-gray:#999999;--panel-gray:#b9b9b9;--button-gray:#c6c6c6;--ink:#111111;--blue:#070b7d;--pink:#e800c5}html{min-width:320px;background:var(--page-gray)}body{margin:0;min-height:100vh;background-color:var(--page-gray);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,input{font:inherit}button{color:inherit}.page-shell{width:min(100% - 32px,920px);margin:0 auto;padding:28px 0 52px}.masthead{margin-bottom:26px}.title-strip{width:-moz-fit-content;width:fit-content;max-width:100%;border:3px outset #cfcfcf;background:linear-gradient(105deg,var(--pink) 0,#ae00bd 42%,var(--blue) 100%);box-shadow:5px 5px 0 #222}h1{margin:0;padding:18px 26px 20px;color:white;font-size:clamp(2.05rem,6vw,4.25rem);line-height:1;letter-spacing:-.06em;text-shadow:2px 2px 0 #4c0061}.tagline{margin:18px 0 0 4px;font-size:1rem;font-weight:700}.action-bar{display:flex;align-items:stretch;gap:15px;margin:0 0 11px}.add-form{display:flex;flex:1 1 420px;gap:10px}.add-form input,.edit-name{min-width:0;border:3px inset #d7d7d7;border-radius:0;background:#f2f2f2;color:var(--ink);padding:8px 10px;font-size:1.15rem}.add-form input{flex:1 1}.add-form input:focus,.edit-name:focus{outline:3px solid var(--blue);outline-offset:2px}.retro-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:45px;border:3px outset #eeeeee;border-radius:2px;background:linear-gradient(#e5e5e5,#ababab);box-shadow:4px 4px 0 #222;cursor:pointer;padding:7px 13px;font-size:1.1rem;font-weight:700;line-height:1.1;text-align:center}.retro-button:hover:not(:disabled){background:linear-gradient(#ffffff,#c1c1c1);transform:translate(-1px,-1px);box-shadow:5px 5px 0 #222}.retro-button:active:not(:disabled){border-style:inset;transform:translate(3px,3px);box-shadow:1px 1px 0 #222}.item-name:focus-visible,.retro-button:focus-visible{outline:3px dashed var(--pink);outline-offset:3px}.retro-button:disabled{cursor:not-allowed;opacity:.55;box-shadow:2px 2px 0 #555}.add-button{min-width:145px;border-color:#f3b8ec #54005c #54005c #f3b8ec;background:linear-gradient(#f4a9e9,#bd47b1);color:#fff;text-shadow:1px 1px 0 #51004e}.add-button:hover:not(:disabled){background:linear-gradient(#ffc9f5,#d460c8)}.button-symbol{font-size:1.55rem;line-height:.7}.remove-button{min-width:220px}.remove-button img{width:16px;height:16px;image-rendering:pixelated}.connection-status{min-height:24px;margin:0 0 10px 3px;font-size:.88rem;font-weight:700}.status-light{display:inline-block;margin-right:6px;color:#555;font-size:.9rem}.status-light.live{color:#087208}.status-light.reconnecting{color:#a64200}.list-container{max-width:760px;border:3px solid #111;background:#777;padding:7px;box-shadow:7px 7px 0 #222}.list-heading-row{display:flex;align-items:baseline;justify-content:space-between;gap:15px;padding:6px 8px 9px;color:#fff}.list-heading-row h2{margin:0;font-size:1.45rem;text-transform:uppercase;letter-spacing:.06em}.item-count{font-size:.9rem;font-weight:700}.shopping-list{list-style:none;margin:0;padding:0}.item{display:flex;align-items:center;min-height:61px;gap:12px;margin:7px 0;padding:7px 10px;border:3px inset #d0d0d0;background:#aaaaaa}.item:first-child{margin-top:0}.item:last-child{margin-bottom:0}.item>input[type=checkbox]{flex:0 0 auto;width:25px;height:25px;margin:0;accent-color:var(--blue);cursor:pointer}.item-name{min-width:0;overflow-wrap:anywhere;border:0;background:transparent;padding:2px 0;cursor:text;font-size:clamp(1.3rem,3vw,2rem);line-height:1.15;text-align:left}.item.is-checked .item-name{color:#444;text-decoration:line-through;text-decoration-thickness:3px}.edit-name{width:100%;font-size:clamp(1.2rem,3vw,1.85rem)}.list-message{margin:0;border:3px inset #d0d0d0;background:#aaaaaa;padding:22px 15px;font-size:1.2rem;font-weight:700}.helper-text{margin:23px 0 0 4px;font-size:.9rem}.error-message{width:-moz-fit-content;width:fit-content;max-width:100%;margin:12px 0 0 4px;border:2px solid #7d0000;background:#ffd1d1;padding:7px 10px;color:#660000;font-weight:700}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media (max-width:650px){.page-shell{width:min(100% - 20px,920px);padding-top:18px}h1{padding:15px 18px 17px}.action-bar,.add-form{flex-direction:column}.add-button,.add-form input,.remove-button{width:100%}.action-bar{gap:12px}.list-container{box-shadow:4px 4px 0 #222}}