:root{--bg-color:#0c0908;--accent-gold:#d4af37;--soy-brown:#2d1b14;--soy-light:#4a3228;--parchment:#f5e6d3;--text-dim:#a8a29e;--transition-slow:.8s cubic-bezier(.77, 0, .175, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--parchment);font-family:Inter,sans-serif;line-height:1.6;overflow-x:hidden}h1,h2,h3{font-family:Bodoni Moda,serif;font-weight:700}.main-container{flex-direction:column;align-items:center;gap:40px;max-width:1200px;margin:40px auto;padding:20px;display:flex}.history-card{aspect-ratio:16/9;cursor:pointer;background:linear-gradient(135deg, var(--soy-brown), var(--bg-color));border-radius:24px;justify-content:center;align-items:center;width:100%;transition:transform .5s,box-shadow .5s;display:flex;position:relative;overflow:hidden;box-shadow:0 20px 40px #00000080}.history-card:hover{transform:translateY(-5px);box-shadow:0 30px 60px #000000b3}.history-card:before{content:"";opacity:.3;background-image:url(https://images.unsplash.com/photo-1578314675249-a6910f80cc4e?auto=format&fit=crop&q=80&w=2070);background-position:50%;background-size:cover;transition:opacity .5s;position:absolute;inset:0}.history-card:hover:before{opacity:.5}.card-content{z-index:2;text-align:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0c090866;border-radius:20px;max-width:800px;padding:40px;position:relative}.category-label{text-transform:uppercase;letter-spacing:4px;color:var(--accent-gold);margin-bottom:20px;font-size:.8rem;display:block}h1{color:var(--parchment);margin-bottom:20px;font-size:clamp(2.5rem,8vw,4.5rem);line-height:1.1}.summary{color:var(--parchment);opacity:.9;margin-bottom:40px;font-size:1.1rem}.interaction-hint{color:var(--accent-gold);justify-content:center;align-items:center;gap:12px;font-size:.9rem;font-weight:600;transition:opacity .3s;display:flex}.pulse-icon{background-color:var(--accent-gold);border-radius:50%;width:10px;height:10px;position:relative}.pulse-icon:after{content:"";background-color:var(--accent-gold);border-radius:50%;width:100%;height:100%;animation:2s infinite pulse;position:absolute}@keyframes pulse{0%{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(3)}}.types-grid{opacity:0;width:100%;transition:opacity var(--transition-slow), transform var(--transition-slow);grid-template-columns:repeat(3,1fr);gap:30px;display:grid;transform:translateY(40px)}.types-grid.visible{opacity:1;transform:translateY(0)}.types-grid.hidden{display:none}.type-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#2d1b1466;border:1px solid #d4af371a;border-radius:24px;flex-direction:column;gap:20px;padding:30px;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex}.type-card:hover{background:#2d1b1499;border-color:#d4af3766;transform:translateY(-15px)scale(1.02);box-shadow:0 20px 40px #00000080}.type-image{aspect-ratio:1;background:var(--soy-light);background-position:50%;background-size:cover;border-radius:16px;width:100%;box-shadow:inset 0 0 40px #00000080}#type-usukuchi .type-image{background-image:url(/images/usukuchi.jpg);background-position:50%}#type-koikuchi .type-image{background-image:url(/images/koikuchi.jpg);background-position:50%}#type-tamari .type-image{background-image:url(/images/tamari.jpg);background-position:50% 30%}.type-info h3{color:var(--accent-gold);margin-bottom:12px;font-size:1.5rem}.type-info p{color:var(--text-dim);font-size:.95rem}@media (width<=768px){.types-grid{grid-template-columns:1fr}.history-card{aspect-ratio:9/16}}