Knot . friendship Care OS

Prompt

Act as an expert frontend developer and UI UX designer. I want you to build a complete web application called Knot Friendship Care OS.

Important rule: Do not output everything in a single HTML file. You must separate the code into distinct files named index dot html, style dot css, app dot js, manifest dot json, and service worker dot js. Because of text generation limits, you must build this project step by step. Please start by outlining the exact file structure for the project, and then generate the complete code for the first file. Wait for me to say next before generating the remaining files.

Here is the specification for the app.

Data and Core Concept:
The app is local first with no backend and no accounts. Use local storage for all data. The app must start completely empty with no dummy data. Provide a button in settings to load and remove sample friends and memories. The app must be an installable progressive web app with a manifest and service worker for offline caching. Use a custom SVG favicon showing two interlocking pastel rings.

Design System:
The design must feel soft, calm, private, and paper like. The background color is hex F6F3ED. The card color is hex FFFDF9. The text color is hex 3A3733. The pastel accent colors are sage A9C6A2, blush E7B3B7, butter F0D4A4, sky A9C6DE, and lavender C4B7DB. Use ui rounded and system rounded fonts. On desktop use a fixed left sidebar navigation. On mobile use a fixed bottom tab bar. Use rounded corners of 18 pixels with soft shadows and subtle borders. Do not include a motion toggle, use smooth CSS transitions.

Interactions and Sounds:
Use the web audio API to synthesize soft chimes for clicks, swipes, and success actions. Include a mute toggle in the header. Include a fullscreen API button in the header. On mobile, friend cards must be swipeable. Swiping right marks a friend as caught up. Swiping left snoozes the friend for seven days.

App Views:
The radar view shows stats for total friends, memories, and warm notes. It lists friends sorted by who is most overdue for a catch up based on their custom cadence.
The friends view has a search bar and a friend detail page with notes, little things, boundaries, promises, memories, warm notes, and shared agreements.
The memory quilt view is a grid of all logged memories across all friends color coded by friend.
The warmth jar view shows random appreciation notes with a pull a note button.
The plans view logs future hangouts with energy and budget tags.
The repair kit view has a cool down timer, apology templates with a copy button, and shared agreements.
The question deck view has twenty five conversation starters with a next button.
The settings view has a sound toggle, sample data toggle, export and import JSON buttons, a reset button, and an install app button.

Technical Constraints:
The app must be perfectly responsive and not break on mobile. Use CSS clamp, flexbox, grid, and safe area insets for iOS notches. Use custom accessible modals for forms instead of browser prompts or alerts.

Please start by outlining the file structure and generating the first part of the project. Stop and ask me to proceed when you are ready for the next file.