<style>
:root {
color-scheme: light;
--bg: #f3f5f8;
--panel: #ffffff;
--panel-2: #edeff4;
--line: #d9dee8;
--ink: #101318;
--ink-soft: #454e5e;
--ink-faint: #6b7484;
--blue: #4b7fe0;
--blue-deep: #2f5fc0;
--green: #2e7d32;
--red: #e53935;
--tabbar-h: 68px;
--radius: 14px;
--shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 6px 16px -6px rgba(16, 24, 40, 0.10);
--shadow-up: 0 2px 4px rgba(16, 24, 40, 0.06), 0 12px 24px -8px rgba(16, 24, 40, 0.16);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: "Public Sans", system-ui, -apple-system, sans-serif;
color: var(--ink);
background: var(--bg);
min-height: 100dvh;
-webkit-font-smoothing: antialiased;
}
/* ---------- Store chrome: announcement bar + black header ---------- */
.announce {
background: var(--blue);
color: #fff;
text-align: center;
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.01em;
padding: 9px 16px;
}
.storebar {
background: #000;
position: sticky;
top: 0;
z-index: 30;
}
.storebar-in {
max-width: 560px;
margin: 0 auto;
padding: 10px 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.storebar-logo {
width: 46px;
height: 46px;
object-fit: cover;
border-radius: 9px;
display: block;
}
.storebar-icons { display: flex; gap: 4px; }
.storebar-icons a {
color: #fff;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease;
}
.storebar-icons a:hover { background: rgba(255, 255, 255, 0.16); }
.storebar-icons a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.storebar-icons svg { width: 22px; height: 22px; }
.app {
max-width: 560px;
margin: 0 auto;
padding: 20px 18px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 28px);
}
/* ---------- Panels / tabs ---------- */
.panel { display: none; }
.panel.is-active { display: block; }
@media (prefers-reduced-motion: no-preference) {
.panel.is-active { animation: fadein 0.28s ease both; }
@keyframes fadein {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
}
.panel-head { margin: 6px 2px 18px; }
.panel-title {
font-family: "Bricolage Grotesque", "Public Sans", sans-serif;
font-size: 30px;
font-weight: 700;
letter-spacing: -0.01em;