:root{--ink:#26352f;--muted:#718078;--cream:#f7f5ef;--paper:#fffefa;--line:#e7e6dd;--sage:#a8b9a4;--deep:#3c594b;--gold:#d6a85b}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:'Noto Sans JP',sans-serif}.topbar{height:76px;padding:0 max(24px,calc((100% - 1120px)/2));display:flex;align-items:center;justify-content:space-between;background:#fbfaf6;border-bottom:1px solid var(--line)}.brand{display:flex;gap:11px;align-items:center}.brand-mark{font-size:27px;color:var(--gold)}.brand b{display:block;letter-spacing:.08em}.brand small{display:block;font-size:10px;color:var(--muted);letter-spacing:.1em}.ghost{border:1px solid var(--line);background:transparent;border-radius:20px;padding:8px 14px;color:var(--muted);cursor:pointer}.hero{max-width:1120px;margin:0 auto;padding:70px 24px 52px;display:flex;justify-content:space-between;align-items:center}.eyebrow{font:700 11px 'DM Sans';letter-spacing:.18em;color:#829882;margin:0 0 12px}.hero h1{font-size:clamp(32px,5vw,58px);letter-spacing:-.06em;margin:0 0 17px;line-height:1.25}.hero h1 em{font-style:normal;color:var(--deep);position:relative}.hero h1 em:after{content:'';position:absolute;height:8px;background:#e5e9d9;bottom:2px;left:4px;right:0;z-index:-1}.intro{color:var(--muted);line-height:2;font-size:14px;max-width:490px}.hero-orb{width:150px;height:150px;border-radius:50%;background:#dce4d8;display:grid;place-items:center;text-align:center;color:var(--deep);transform:rotate(8deg);margin-right:7%}.hero-orb span{transform:rotate(-8deg);font-size:12px;line-height:1.7}.hero-orb strong{font:700 43px 'DM Sans';line-height:1}.tabs{max-width:1120px;margin:auto;padding:0 24px;display:flex;gap:28px;border-bottom:1px solid var(--line)}.tab{border:0;background:none;padding:14px 2px;color:var(--muted);font-weight:700;cursor:pointer;border-bottom:2px solid transparent}.tab.active{color:var(--deep);border-color:var(--deep)}.view{max-width:1120px;margin:0 auto;padding:32px 24px 80px;display:none}.view.active{display:block}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.search{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:11px 14px;display:flex;gap:9px;align-items:center;width:300px}.search span{font-size:22px;color:var(--muted)}.search input{border:0;outline:0;background:none;font:inherit;width:100%}.filters{display:flex;gap:7px;flex-wrap:wrap}.filter{border:1px solid var(--line);background:transparent;border-radius:18px;padding:8px 13px;color:var(--muted);cursor:pointer;font-size:12px}.filter.active{background:var(--deep);color:white;border-color:var(--deep)}.section-head{display:flex;justify-content:space-between;align-items:end;margin:42px 0 18px}.section-head h2,.quiz-top h2{font-size:25px;letter-spacing:-.04em;margin:0}.section-head h2 span{font:400 12px 'DM Sans';color:var(--muted);margin-left:8px}.hint{font-size:12px;color:var(--muted)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:15px}.oil-card{height:255px;perspective:1000px;cursor:pointer}.card-inner{height:100%;position:relative;transition:transform .55s;transform-style:preserve-3d}.oil-card.flipped .card-inner{transform:rotateY(180deg)}.face{position:absolute;inset:0;backface-visibility:hidden;background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:20px;display:flex;flex-direction:column}.back{transform:rotateY(180deg);background:#edf2e9}.oil-no{font:700 11px 'DM Sans';color:var(--gold);letter-spacing:.12em}.face h3{font-size:23px;margin:18px 0 2px}.latin{font:italic 12px 'DM Sans';color:var(--muted)}.scent{margin-top:auto;color:var(--deep);font-weight:700;font-size:13px}.tag{font-size:10px;color:var(--muted);margin-top:15px}.back h4{font-size:13px;margin:0 0 12px;color:var(--deep)}.back p{font-size:13px;line-height:1.8;margin:0}.mark{margin-top:auto;font-size:11px;color:var(--muted)}.quiz-shell{max-width:650px;margin:20px auto;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:28px}.quiz-top{display:flex;justify-content:space-between;align-items:start;margin-bottom:28px}.score{background:#edf2e9;color:var(--deep);padding:7px 12px;border-radius:20px;font:700 13px 'DM Sans'}.question{font-size:19px;font-weight:700;line-height:1.7;margin:0 0 20px}.answers{display:grid;gap:10px}.answer{border:1px solid var(--line);background:#fff;border-radius:9px;text-align:left;padding:13px 15px;cursor:pointer;font:inherit}.answer:hover{border-color:var(--sage)}.answer.correct{background:#e2eee0;border-color:#92ad8b}.answer.wrong{background:#f5e5df;border-color:#d29984}.next{margin-top:20px;border:0;background:var(--deep);color:white;border-radius:22px;padding:11px 20px;cursor:pointer}footer{font-size:11px;color:#879088;text-align:center;padding:25px;line-height:1.8}@media(max-width:600px){.hero{padding-top:44px}.hero-orb{width:100px;height:100px;margin-right:0}.hero-orb strong{font-size:30px}.section-head{display:block}.hint{margin-top:9px}.search{width:100%}}