:root {
  --background: #faf8f3;
  --surface: #ffffff;
  --ink: #343434;
  --muted: #8b8882;
  --border: #e9e3d9;
  --blue: #a8d8e8;
  --yellow: #f5d77a;
  --coral: #f3a28f;
  --green: #b9d9b1;
  --purple: #c9b8d9;
  --shadow: 0 10px 30px rgba(75, 66, 53, .07);
  --radius: 18px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--background); color: var(--ink); font-family: "DM Sans", sans-serif; overflow: hidden; }
button, a { font: inherit; }
button { cursor: pointer; }

.app-shell { display: grid; grid-template-columns: minmax(150px, 15%) minmax(0, 70%) minmax(180px, 15%); width: 100%; height: 100vh; overflow: hidden; }
.sidebar { padding: 38px 22px 28px; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.sidebar-left { border-right: 1px solid var(--border); position: relative; }
.sidebar-right { border-left: 1px solid var(--border); align-items: stretch; overflow: hidden; }

.brand-lockup { display: flex; flex-direction: column; align-items: center; text-align: center; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 8px; border-radius: 50%; background: var(--coral); color: white; font-size: 15px; transform: rotate(-12deg); }
.brand-name { font-size: clamp(14px, 1.35vw, 21px); font-weight: 700; line-height: .95; letter-spacing: -.05em; }
.brand-name span { color: #9b7c9e; font-weight: 500; }
.mascot-card { width: min(112px, 100%); aspect-ratio: .82; margin-top: 42px; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--surface); border-radius: 58px 58px 16px 16px; box-shadow: var(--shadow); transform: rotate(-2deg); }
.tape { position: absolute; top: -7px; width: 48px; height: 15px; background: rgba(245,215,122,.78); transform: rotate(7deg); }
.mascot { display: grid; place-items: center; width: 67px; height: 67px; border-radius: 50%; background: var(--blue); color: #6b9eaf; font-size: 57px; line-height: 1; transform: rotate(5deg); }
.mascot-caption { margin-top: 13px; color: var(--muted); font-family: Kalam, cursive; font-size: 12px; line-height: 1.05; text-align: center; }
.sparkle { position: absolute; color: var(--coral); font-size: 17px; }.sparkle-one { top: 30px; right: 8px; }.sparkle-two { bottom: 35px; left: 12px; color: var(--purple); font-size: 24px; }
.brand-quote { margin: 28px 0 0; color: #77736d; font: 700 clamp(14px, 1.2vw, 18px)/1.16 Kalam, cursive; text-align: center; transform: rotate(-3deg); }
.scribble { margin-top: auto; color: var(--yellow); font-size: 38px; transform: rotate(-20deg); }

.product-showcase { padding: 38px clamp(24px, 4vw, 65px) 22px; min-width: 0; overflow: hidden; }
.showcase-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.eyebrow, .group-title { margin: 0 0 9px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(29px, 3.2vw, 51px); line-height: .98; letter-spacing: -.07em; font-weight: 600; }.showcase-header h1 em { color: #9c799f; font-family: Kalam, cursive; font-weight: 700; font-style: normal; letter-spacing: -.08em; }
.header-note { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; color: var(--muted); font-size: 11px; white-space: nowrap; }.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.category-nav { display: flex; gap: 6px; margin: 30px 0 18px; overflow-x: auto; scrollbar-width: none; }.category-nav::-webkit-scrollbar { display: none; }
.filter-button { border: 1px solid transparent; border-radius: 30px; padding: 9px 13px; background: transparent; color: var(--muted); font-size: 11px; white-space: nowrap; transition: .25s ease; }.filter-button span { margin-left: 5px; opacity: .55; font-size: 9px; }.filter-button:hover { color: var(--ink); background: rgba(255,255,255,.7); }.filter-button.active { background: var(--ink); color: white; }
.display-case { height: calc(100vh - 220px); min-height: 390px; position: relative; padding: 42px 28px 46px; border: 1px solid var(--border); border-radius: 26px; background: #f2eee6; box-shadow: inset 0 0 0 7px rgba(255,255,255,.34), var(--shadow); overflow: hidden; }.display-case::before { content: ""; position: absolute; inset: 17px; border: 1px dashed rgba(168, 154, 131, .3); border-radius: 18px; pointer-events: none; }
.case-label { position: absolute; top: 27px; left: 44px; z-index: 2; display: flex; align-items: baseline; gap: 6px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }.case-label strong { color: var(--ink); font-size: 12px; letter-spacing: 0; text-transform: none; }
.product-grid { height: 100%; position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: center; gap: 16px; padding-top: 10px; }
.product-item { min-width: 0; height: min(205px, 100%); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border: 0; background: transparent; color: var(--ink); transition: transform .3s ease; }.product-item:hover { transform: translateY(-8px); }.product-item:focus-visible { outline: 2px solid #9c799f; outline-offset: 4px; border-radius: 12px; }
.product-object { width: clamp(78px, 8vw, 130px); aspect-ratio: 1; display: grid; place-items: center; position: relative; border-radius: 50%; box-shadow: 0 11px 15px rgba(90,75,60,.15), inset 0 0 0 8px rgba(255,255,255,.45); font-size: clamp(34px, 4vw, 58px); transition: transform .3s ease; }.product-item:hover .product-object { transform: rotate(7deg) scale(1.06); }
.product-object::after { content: ""; position: absolute; bottom: -16px; width: 125%; height: 13px; border-radius: 50%; background: rgba(115, 97, 74, .13); filter: blur(3px); z-index: -1; }.color-blue { background: var(--blue); }.color-yellow { background: var(--yellow); }.color-coral { background: var(--coral); }.color-green { background: var(--green); }.color-purple { background: var(--purple); }
.product-name { max-width: 125px; margin: 23px 0 3px; font-size: 11px; font-weight: 700; line-height: 1.15; text-align: center; }.product-category { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }.case-decoration { position: absolute; color: var(--coral); }.decoration-star { right: 37px; top: 34px; font-size: 30px; transform: rotate(12deg); }.decoration-line { left: 30px; bottom: 26px; width: 52px; height: 10px; border-top: 2px solid var(--blue); border-radius: 50%; transform: rotate(-8deg); }.case-footer { position: absolute; right: 40px; bottom: 26px; left: 40px; z-index: 2; display: flex; justify-content: space-between; color: var(--muted); font: 11px Kalam, cursive; }

.connections-heading { padding-bottom: 28px; border-bottom: 1px solid var(--border); }.connections-heading h2 { margin: 0 0 5px; font-size: 24px; letter-spacing: -.06em; }.connections-heading > p:last-child { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.35; }
.link-group { padding-top: 22px; }.group-title { font-size: 9px; }.link-list { display: grid; gap: 7px; }.connection-link { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px; border: 1px solid transparent; border-radius: 11px; color: var(--ink); text-decoration: none; font-size: 10px; transition: .25s ease; }.connection-link:hover { background: white; border-color: var(--border); box-shadow: var(--shadow); transform: translateX(-3px); }.connection-icon { display: grid; flex: 0 0 24px; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: var(--ink); font-size: 12px; font-weight: 700; }.connection-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.marketplace-group { margin-top: 10px; padding-top: 19px; border-top: 1px solid var(--border); }.side-footer { margin-top: auto; color: var(--muted); font: 13px/1.1 Kalam, cursive; }.side-footer strong { color: #9c799f; }

.product-modal { width: min(440px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 24px; background: var(--background); color: var(--ink); box-shadow: 0 24px 80px rgba(50, 42, 30, .22); overflow: hidden; }.product-modal::backdrop { background: rgba(52, 52, 52, .18); backdrop-filter: blur(4px); }.modal-close { position: absolute; top: 13px; right: 16px; z-index: 2; border: 0; background: transparent; color: var(--muted); font-size: 26px; line-height: 1; }.modal-inner { display: grid; grid-template-columns: 42% 58%; min-height: 250px; }.modal-visual { display: grid; place-items: center; padding: 25px; background: #f1ece2; }.modal-visual .product-object { width: 145px; }.modal-copy { padding: 34px 28px 28px; }.modal-copy h2 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.05em; }.modal-copy .modal-category { color: #9c799f; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.modal-copy p { color: var(--muted); font-size: 12px; line-height: 1.55; }.modal-cta { display: inline-block; margin-top: 10px; padding: 10px 15px; border-radius: 20px; background: var(--ink); color: white; text-decoration: none; font-size: 11px; }.hidden { display: none; }

@media (max-width: 1000px) { .app-shell { grid-template-columns: 17% minmax(0, 66%) 17%; }.sidebar { padding-right: 14px; padding-left: 14px; }.product-showcase { padding-right: 24px; padding-left: 24px; }.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }.product-item:nth-child(n+7) { display: none; }.display-case { padding-right: 18px; padding-left: 18px; } }
@media (max-width: 700px) { body { overflow: auto; }.app-shell { display: flex; flex-direction: column; height: auto; min-height: 100vh; overflow: visible; }.sidebar { border: 0; }.sidebar-left { flex-direction: row; justify-content: space-between; padding: 18px 22px 10px; }.brand-lockup { flex-direction: row; gap: 8px; text-align: left; }.brand-mark { margin: 0; }.mascot-card, .scribble { display: none; }.brand-quote { margin: 0; font-size: 13px; }.product-showcase { order: 2; padding: 22px 16px 30px; overflow: visible; }.showcase-header { align-items: flex-start; flex-direction: column; }.header-note { margin-top: 2px; }.category-nav { margin: 22px 0 14px; }.display-case { height: auto; min-height: 470px; padding: 50px 20px 45px; }.product-grid { min-height: 360px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.product-item { height: 160px; }.product-item:nth-child(n+7) { display: flex; }.product-object { width: 93px; }.sidebar-right { order: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; padding: 25px 20px 35px; border-top: 1px solid var(--border); }.connections-heading { grid-column: 1 / -1; padding-bottom: 16px; }.link-group { padding-top: 0; }.marketplace-group { margin: 0; padding-top: 0; border: 0; }.side-footer { display: none; }.modal-inner { grid-template-columns: 1fr; }.modal-visual { min-height: 180px; }.modal-copy { padding: 22px 24px 25px; } }