.shopping{background:#f5f5f7;border:1px solid #e5e5ea;border-radius:24px;overflow:hidden}.demo-settings{display:flex;align-items:center;gap:12px;padding:15px 22px;font-size:12px;color:#6e6e73}.demo-settings select{font:inherit;min-height:36px;border:0;border-radius:8px;padding:6px 10px;background:#e8e8ed;color:#1d1d1f}.ipad{display:grid;grid-template-columns:190px 1fr;margin:0 16px;border:1px solid #dcdce1;border-radius:18px;overflow:hidden;background:#fff;min-height:530px;box-shadow:0 12px 36px #2020380a}.sidebar{background:#efeff4;padding:26px 12px;position:relative;border-right:1px solid #dddde5}.app-name{font-size:18px;font-weight:600;padding:0 8px}.sidebar-heading{font-size:12px;color:#777780;margin:32px 8px 10px}.selected-list{display:flex;align-items:center;gap:7px;background:#e1e1e9;border-radius:9px;padding:10px 8px;font-size:13px}.selected-list>span:last-child{margin-left:auto;color:#75757d}.list-symbol{display:grid;place-items:center;background:#007aff;color:#fff;border-radius:50%;width:25px;height:25px;font-size:20px}.calendar .sidebar-note,.article .sidebar-note{font-size:12px;line-height:1.5;color:#8a8a92;position:absolute;bottom:20px;left:20px;right:20px;margin:0}.list-pane{position:relative;padding:20px 28px 32px;min-width:0;display:flex;flex-direction:column}.list-toolbar{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#8a8a92}.list-heading{display:flex;align-items:center;justify-content:space-between;margin:26px 0 12px;color:#007aff}.article .list-heading h2{margin:0;font-size:32px;font-weight:700;letter-spacing:-1px}.list-heading>span{font-size:30px;font-weight:600}.rows{min-height:202px}.article #empty{margin-top:26px;font-size:16px;color:#b1b1b8}.grocery-row{display:flex;align-items:center;gap:12px;min-height:62px;border-bottom:1px solid #ececf0;font-size:16px;animation:arrive .5s cubic-bezier(.2,.8,.2,1)}.grocery-row small{display:block;font-size:11px;color:#8a8a92;min-height:17px}.check-ring{width:20px;height:20px;border:1.5px solid #c5c5cc;border-radius:50%;flex-shrink:0}.quantity{margin-left:auto;font-size:13px;color:#85858d}.grocery-row.revised{animation:revise 1.1s ease-out}.conversation{margin-top:auto;min-height:120px;padding:15px 17px;border:1px solid #e7e7ee;background:#f8f8fc;border-radius:18px;transition:background .3s,transform .4s;box-shadow:0 4px 16px #33335006}.conversation-label{display:flex;gap:9px;align-items:center;font-size:11px;color:#6e6e73}.pulse{display:flex;align-items:center;gap:3px;height:16px}.pulse i{width:4px;height:4px;border-radius:50%;background:#007aff}.ipad[data-phase=assistant] .pulse i,.ipad[data-phase=user] .pulse i{animation:listen .6s ease-in-out infinite alternate}.pulse i:nth-child(2){animation-delay:-.2s!important}.pulse i:nth-child(3){animation-delay:-.4s!important}.ipad[data-phase=waiting] .pulse{animation:breathe 2s ease-in-out infinite}.article #spoken{font-size:16px;line-height:1.4;margin:10px 0 0;min-height:44px;letter-spacing:-.2px}.hints{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:#85858d;animation:arrive .5s}.home-indicator{height:4px;width:90px;border-radius:3px;background:#232327;margin:20px auto -23px}.shopping button{font:inherit;font-size:13px;min-height:44px;padding:10px 17px;border:0;border-radius:10px;cursor:pointer;color:#007aff;background:#e8e8ed}.shopping .primary{background:#007aff;color:#fff}.shopping button:disabled{opacity:.4;cursor:default}.shopping #done{background:#fff;border:1px solid #dddde5;border-radius:22px;color:#007aff}.narration{padding:22px 24px 10px;min-height:100px;text-align:center}.article .narration p{font-size:13px;color:#6e6e73;margin:0 0 5px}.article .narration #context{font-weight:500;color:#414149}.playback{display:flex;align-items:center;gap:8px;padding:0 24px}.playback>span{margin-left:auto;font-size:11px;color:#85858d}.sound{display:flex;align-items:center;gap:8px;margin:15px 24px 0;font-size:12px;min-height:36px}.sound input{width:17px;height:17px}.article .sound-note{font-size:11px;color:#85858d;margin:0 24px 20px}.shopping.paused .pulse,.shopping.paused .pulse i{animation-play-state:paused!important}.ipad[data-phase=complete] .conversation{background:#eff7f0}.ipad[data-phase=complete] .pulse i{background:#248a3d}@keyframes arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes revise{0%{background:#dcecff}100%{background:transparent}}@keyframes listen{to{height:14px}}@keyframes breathe{50%{opacity:.35}}@media(max-width:650px){.ipad{grid-template-columns:145px 1fr;margin:0 10px}.list-pane{padding:18px 18px 30px}.sidebar{padding:24px 8px}.app-name{font-size:16px}.selected-list{font-size:12px;gap:5px}.list-symbol{width:21px;height:21px}.list-toolbar>span:first-child{display:none}.list-toolbar{justify-content:flex-end}}@media(max-width:480px){.ipad{grid-template-columns:1fr}.sidebar{display:none}.list-pane{padding:18px 20px 30px;min-height:510px}.list-toolbar>span:first-child{display:block}.list-toolbar{justify-content:space-between}.article .list-heading h2{font-size:29px}.conversation{padding:14px}.demo-settings{padding:12px 16px}.narration{padding:18px 16px 10px;min-height:116px}.playback{padding:0 16px}.playback>span{font-size:10px}}@media(prefers-reduced-motion:reduce){.shopping *{animation:none!important;transition:none!important}}
.shopping #respond{background:#fff;border:1px solid #dddde5;border-radius:16px;color:#007aff;max-width:100%;text-align:left}.shopping .hints{flex-wrap:wrap}