.demo-index{padding-top:var(--header-h)}.demo-index__lead{max-width:640px;margin:calc(-1 * var(--space-4)) 0 var(--space-8);color:var(--color-text-sub);line-height:1.9}.demo-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin:0;padding:0;list-style:none;display:grid}.demo-card{border:1px solid var(--color-border);background:var(--color-bg-card);height:100%;color:inherit;transition:border-color .2s, transform .2s var(--ease-out-cubic);border-radius:12px;flex-direction:column;text-decoration:none;display:flex;overflow:hidden}a.demo-card:hover,a.demo-card:focus-visible{border-color:var(--color-accent);transform:translateY(-2px)}.demo-card--soon{opacity:.6}.demo-card__thumb{aspect-ratio:16/9;background:linear-gradient(135deg, var(--color-bg-secondary), var(--color-bg));font-family:var(--font-en);font-size:var(--text-sm);letter-spacing:.2em;color:var(--color-text-sub);place-items:center;display:grid}.demo-card__art--book{background:linear-gradient(90deg, #1f5540 0 10%, var(--color-accent) 10%);width:64px;height:90px;box-shadow:8px 8px 0 -2px #f4efe3, 8px 8px 0 -1px var(--color-border-strong);border-radius:3px 6px 6px 3px;transform:rotate(-8deg)}.demo-card__body{padding:var(--space-3)}.demo-card__title{font-size:var(--text-lg);margin:0 0 var(--space-1)}.demo-card__summary{font-size:var(--text-sm);color:var(--color-text-sub);margin:0;line-height:1.8}.demo-card__tags{margin:var(--space-2) 0 0;flex-wrap:wrap;gap:6px;padding:0;list-style:none;display:flex}.demo-card__tags li{font-size:var(--text-xs);border:1px solid var(--color-border);color:var(--color-text-sub);border-radius:999px;padding:2px 10px}.demo-card__art--museum{width:132px;height:84px;box-shadow:inset 0 0 0 1px var(--color-border);background:linear-gradient(to bottom right,#0000 49%,#d8d2c6 50%) 0 0/50% 38% no-repeat,linear-gradient(to bottom left,#0000 49%,#d8d2c6 50%) 100% 0/50% 38% no-repeat,linear-gradient(to top right,#0000 49%,#c9b08a 50%) 0 100%/50% 30% no-repeat,linear-gradient(to top left,#0000 49%,#c9b08a 50%) 100% 100%/50% 30% no-repeat,#f3efe8;border-radius:4px;position:relative}.demo-card__art--museum:before,.demo-card__art--museum:after{content:"";border:2px solid #2b2724;width:16px;height:20px;position:absolute;top:34%}.demo-card__art--museum:before{background:linear-gradient(#d9774b 0 50%,#2f7259 50%);left:14px}.demo-card__art--museum:after{background:linear-gradient(90deg,#3d5a80 0 40%,#f2c46d 40%);right:14px}.demo-card__art--perfume{width:132px;height:84px;box-shadow:inset 0 0 0 1px var(--color-border);background:radial-gradient(circle at 12% 88%,#fff1c9 0 6%,#0000 7%),radial-gradient(circle at 20% 82%,#f6b3bf 0 5%,#0000 6%),radial-gradient(circle at 84% 86%,#fffaf3 0 5%,#0000 6%),radial-gradient(circle at 70% 92%,#c3b0e8 0 6%,#0000 7%),linear-gradient(#a9b6d8 0%,#f3c9c4 45%,#ffc98f 68%,#8f9a5c 68%,#4f6b3c 100%);border-radius:4px;position:relative;overflow:hidden}.demo-card__art--perfume:before{content:"";background:linear-gradient(135deg,#ffffffb3 0 18%,#f3b8c3 18%);border:1px solid #ffffffe6;border-radius:4px;width:30px;height:26px;position:absolute;top:38%;left:50%;transform:translate(-50%)rotate(-10deg)}.demo-card__art--perfume:after{content:"";background:linear-gradient(#fffc,#fff6) top/100% 70% no-repeat,#cfc8c0;border:1px solid #ffffffe6;border-radius:2px;width:14px;height:14px;position:absolute;top:18%;left:50%;transform:translate(-30%)rotate(-10deg)}.demo-book{background:radial-gradient(ellipse at 50% 40%, #f8fbf8 0%, var(--color-bg) 60%, var(--color-bg-secondary) 100%)}.demo-book__track{position:relative}.demo-book__stage{z-index:0;pointer-events:none;height:100svh;position:sticky;top:0}.demo-book__canvas,.demo-book__placeholder{width:100%;height:100%;inset:0;position:absolute!important}.demo-book__placeholder{background:radial-gradient(circle,#2f72591f,#0000 45%)}.demo-book__content{z-index:1;margin-top:-100svh;position:relative}.demo-book__section{min-height:100svh;max-width:var(--container-max);padding:calc(var(--header-h) + var(--space-4)) var(--container-padding) var(--space-8);align-items:center;margin:0 auto;display:flex}.demo-book__section--right{justify-content:flex-end}.demo-book__panel{max-width:400px;padding:var(--space-4);-webkit-backdrop-filter:blur(8px);background:#f8fbf8d1;border:1px solid #ccd8cccc;border-radius:16px;line-height:1.9}.demo-book__panel p{margin:0 0 var(--space-2)}.demo-book__title{font-size:clamp(var(--text-2xl), 4vw, 44px);margin:0 0 var(--space-3);line-height:1.3}.demo-book__h2{font-size:var(--text-xl);margin:0 0 var(--space-2)}.demo-book__lead{font-size:var(--text-base)}.demo-book__hint{font-size:var(--text-sm);color:var(--color-text-sub)}.demo-book__panel .demo-book__note{margin:var(--space-1) 0 var(--space-2);border:1px solid var(--color-accent);font-size:var(--text-xs);color:var(--color-accent);border-radius:999px;padding:2px 10px;display:inline-block}.demo-book__list{margin:0;padding-left:1.2em}.demo-book__chapters{gap:var(--space-2);margin:0;padding:0;list-style:none;display:grid}.demo-book__chapters li{gap:var(--space-2);display:flex}.demo-book__chapters h3{font-size:var(--text-base);margin:0}.demo-book__chapters p{font-size:var(--text-sm);color:var(--color-text-sub);margin:0}.demo-book__chapter-no{font-family:var(--font-en);color:var(--color-accent);font-weight:700}.demo-book__actions{align-items:center;gap:var(--space-3);margin-top:var(--space-3);flex-wrap:wrap;display:flex}.demo-book__button{background:var(--color-accent);color:#fff;border-radius:999px;padding:12px 24px;font-weight:700;text-decoration:none;display:inline-block}.demo-book__button:hover,.demo-book__button:focus-visible{background:var(--color-accent-hover)}.demo-book__link{color:var(--color-accent)}@media (max-width:767px){.demo-book__section,.demo-book__section--right{justify-content:center;align-items:flex-end}.demo-book__panel{background:#f8fbf8e6;width:100%;max-width:none}}.demo-museum{background:#ebe6dc}.demo-museum__track{position:relative}.demo-museum__stage{z-index:0;pointer-events:none;height:100svh;position:sticky;top:0}.demo-museum__canvas,.demo-museum__placeholder{width:100%;height:100%;inset:0;position:absolute!important}.demo-museum__placeholder{background:radial-gradient(at 50% 48%,#f6f2ea 0 8%,#0000 30%),linear-gradient(#e2ddd3 0 30%,#ebe6dc 30% 64%,#c9b08a 64%)}.demo-museum__content{z-index:1;margin-top:-100svh;position:relative}.demo-museum__section{min-height:110svh;max-width:var(--container-max);padding:calc(var(--header-h) + var(--space-4)) var(--container-padding) var(--space-8);align-items:center;margin:0 auto;display:flex}.demo-museum__section--right{justify-content:flex-end}.demo-museum__section--cta{justify-content:center;align-items:flex-end}.demo-museum__panel{max-width:380px;padding:var(--space-4);-webkit-backdrop-filter:blur(8px);background:#fbfaf7db;border:1px solid #ccc4b8cc;border-radius:16px;line-height:1.9}.demo-museum__panel p{margin:0 0 var(--space-2)}.demo-museum__title{font-size:clamp(var(--text-2xl), 4vw, 44px);margin:0 0 var(--space-3);line-height:1.3}.demo-museum__h2{font-size:var(--text-xl);margin:0 0 var(--space-1);align-items:baseline;gap:var(--space-2);display:flex}.demo-museum__no{font-family:var(--font-en);font-size:var(--text-base);color:var(--color-accent)}.demo-museum__medium,.demo-museum__hint{font-size:var(--text-sm);color:var(--color-text-sub)}.demo-museum__actions{align-items:center;gap:var(--space-3);margin-top:var(--space-3);flex-wrap:wrap;display:flex}.demo-museum__button{background:var(--color-accent);color:#fff;border-radius:999px;padding:12px 24px;font-weight:700;text-decoration:none;display:inline-block}.demo-museum__button:hover,.demo-museum__button:focus-visible{background:var(--color-accent-hover)}.demo-museum__link{color:var(--color-accent)}@media (max-width:767px){.demo-museum__section,.demo-museum__section--right{justify-content:center;align-items:flex-end}.demo-museum__panel{background:#fbfaf7eb;width:100%;max-width:none}}.demo-perfume{background:linear-gradient(#a9b6d8 0%,#d9c3d8 50%,#f3c9c4 100%)}.demo-perfume__track{position:relative}.demo-perfume__stage{z-index:0;pointer-events:none;height:100svh;position:sticky;top:0}.demo-perfume__canvas,.demo-perfume__placeholder{width:100%;height:100%;inset:0;position:absolute!important}.demo-perfume__placeholder{background:radial-gradient(circle at 30% 110%,#fff1c9e6,#0000 45%),linear-gradient(#a9b6d8 0%,#d9c3d8 45%,#f3c9c4 80%,#ffc98f 100%)}.demo-perfume__content{z-index:1;margin-top:-100svh;position:relative}.demo-perfume__section{min-height:110svh;max-width:var(--container-max);padding:calc(var(--header-h) + var(--space-4)) var(--container-padding) var(--space-8);align-items:center;margin:0 auto;display:flex}.demo-perfume__section--right{justify-content:flex-end}.demo-perfume__panel{max-width:380px;padding:var(--space-4);-webkit-backdrop-filter:blur(8px);background:#fffaf8d6;border:1px solid #eccecee6;border-radius:16px;line-height:1.9}.demo-perfume__panel p{margin:0 0 var(--space-2)}.demo-perfume__title{font-size:clamp(var(--text-2xl), 4vw, 44px);margin:0 0 var(--space-2);line-height:1.3}.demo-perfume__brand{font-family:var(--font-en);letter-spacing:.18em;font-size:var(--text-sm);color:#b0697a}.demo-perfume__h2{font-size:var(--text-xl);margin:0 0 var(--space-1)}.demo-perfume__hint{font-size:var(--text-sm);color:var(--color-text-sub)}.demo-perfume__actions{margin-top:var(--space-3)}.demo-perfume__button{background:var(--color-accent);color:#fff;border-radius:999px;padding:12px 24px;font-weight:700;text-decoration:none;display:inline-block}.demo-perfume__button:hover,.demo-perfume__button:focus-visible{background:var(--color-accent-hover)}.demo-perfume__links{margin:var(--space-3) 0 0;gap:var(--space-1) var(--space-3);font-size:var(--text-sm);flex-wrap:wrap;padding:0;list-style:none;display:flex}.demo-perfume__links a{color:var(--color-accent)}@media (max-width:767px){.demo-perfume__section,.demo-perfume__section--right,.demo-perfume__section--cta{justify-content:center;align-items:flex-end}.demo-perfume__section--cta{padding-top:calc(10vh + var(--header-h) + var(--space-2));padding-top:calc(10svh + var(--header-h) + var(--space-2));align-items:flex-start}.demo-perfume__panel{background:#fffaf8eb;width:100%;max-width:none}}