:root { color-scheme:dark; --bg:#0b0d0c; --ink:#eff1e9; --muted:#a9b1a8; --line:#2c322d; --accent:#c1d6b5; }
* { box-sizing:border-box; letter-spacing:0; } body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.8 "BIZ UDPGothic","Yu Gothic","Hiragino Sans",Meiryo,sans-serif; }
a { color:inherit; text-underline-offset:4px; } button,input,select { font:inherit; } button,a,input,select { -webkit-tap-highlight-color:transparent; } button { cursor:pointer; } svg { flex:none; vertical-align:middle; } [hidden] { display:none!important; }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; } .skip-link { position:absolute; left:16px; top:-60px; background:var(--accent); color:#112010; padding:8px 16px; z-index:10; }.skip-link:focus { top:12px; }
.site-header { border-bottom:1px solid var(--line); }.header-inner,.video-shell,.site-footer { width:min(1200px,calc(100% - 64px)); margin:auto; }.header-inner { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:24px; }.brand { display:flex; align-items:baseline; gap:14px; text-decoration:none; white-space:nowrap; }.brand strong { font:600 26px "Yu Mincho",serif; }.brand small { color:var(--muted); font-size:11px; }.header-inner nav { display:flex; gap:26px; }.header-inner nav a { text-decoration:none; font-size:13px; }.header-inner nav a[aria-current] { color:var(--accent); }
.breadcrumbs { display:flex; gap:9px; flex-wrap:wrap; color:var(--muted); font-size:11px; margin:25px 0; }.breadcrumbs a { text-decoration:none; }.page-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:28px 0 30px; }.eyebrow { color:var(--accent); font-size:10px; font-weight:600; margin:0 0 9px; }.page-heading h1 { font:600 36px/1.4 "Yu Mincho","Hiragino Mincho ProN",serif; margin:0 0 12px; }.page-heading p:not(.eyebrow) { font-size:13px; color:var(--muted); margin:0; }.collection-count { font-size:11px; white-space:nowrap; color:var(--muted); }.collection-count b { font-size:28px; font-weight:500; color:var(--ink); margin:0 5px; }
.watch-stage { display:grid; grid-template-columns:minmax(0,1.9fr) minmax(280px,1fr); gap:32px; padding-bottom:32px; border-bottom:1px solid var(--line); scroll-margin-top:20px; }.watch-stage > * { min-width:0; }.video-player { position:relative; width:100%; aspect-ratio:16/9; background:#171c18; overflow:hidden; }.video-player > img,.video-player iframe { display:block; width:100%; height:100%; object-fit:cover; border:0; }.load-player { position:absolute; inset:0; border:0; width:100%; background:#0003; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:white; text-shadow:0 1px 6px #000; font-size:12px; }.load-player > svg { width:58px; height:58px; padding:16px; background:#edf0e9; color:#172019; border-radius:50%; fill:currentColor; }.load-player:hover { background:#0001; }.load-player:focus-visible { outline-offset:-6px; }.load-player span { padding:5px 10px; background:#111c; border-radius:3px; }.player-privacy { font-size:10px; line-height:1.8; color:var(--muted); margin:10px 0 0; }.noscript-watch { position:absolute; inset:auto 16px 16px; padding:8px 14px; background:#101810; }
.watch-topic { margin:0 0 12px; font-size:11px; font-weight:700; }.topic-brewing { color:#c4d5af; }.topic-ingredients { color:#d9bc7a; }.topic-trivia { color:#aebcdb; }.topic-pouring { color:#a6cfc4; }.watch-info h2 { font-size:22px; line-height:1.6; font-weight:600; margin:0 0 12px; overflow-wrap:anywhere; }.watch-publisher { color:var(--accent); font-size:12px; margin:0 0 16px; }.watch-description { color:#b9c1b7; font-size:13px; margin:0 0 18px; }.watch-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }.watch-actions a,.watch-actions button { display:inline-flex; gap:7px; align-items:center; border:1px solid #57694f; padding:7px 12px; min-height:38px; border-radius:4px; background:transparent; color:var(--ink); font-size:11px; text-decoration:none; }.watch-actions a { background:#253020; }.watch-actions svg { width:15px; height:15px; }.availability-note { font-size:10px; color:var(--muted); margin:12px 0 16px; }.video-source { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:12px 0; font-size:11px; color:var(--muted); }.video-source summary { cursor:pointer; color:var(--ink); }.video-source dl { margin:12px 0; }.video-source dt { font-size:10px; color:#929f90; }.video-source dd { margin:3px 0 12px; overflow-wrap:anywhere; }.video-source svg { width:14px; height:14px; }.watch-related { margin-top:16px; display:grid; gap:6px; font-size:11px; }.watch-related p { margin:0; color:var(--muted); font-size:10px; }.watch-related a { text-decoration:none; display:flex; align-items:center; gap:4px; }.watch-related svg { width:14px; height:14px; }
.video-library { padding:32px 0 42px; }.library-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px; }.library-heading h2 { font-size:23px; font-weight:500; margin:0; }.library-heading > p { margin:0; color:var(--muted); font-size:12px; }.topic-tabs { display:flex; gap:24px; overflow-x:auto; border-bottom:1px solid var(--line); }.topic-tabs button { flex:none; background:transparent; border:0; border-bottom:2px solid transparent; padding:12px 0; color:var(--muted); font-size:13px; }.topic-tabs [aria-pressed="true"] { border-bottom-color:var(--accent); color:var(--accent); }.filter-inputs { display:flex; align-items:center; gap:12px; padding:20px 0 26px; }.video-search { display:flex; align-items:center; gap:10px; border:1px solid #3a443a; border-radius:4px; padding:0 12px; flex:1; min-width:0; }.video-search svg { width:17px; height:17px; color:var(--muted); }.video-search input { border:0; padding:10px 0; width:100%; min-width:0; background:transparent; color:var(--ink); outline:none; }.video-search:focus-within { outline:2px solid var(--accent); outline-offset:2px; }.filter-inputs select { min-height:44px; padding:8px 12px; border:1px solid #3a443a; background:#121713; color:var(--ink); border-radius:4px; font-size:12px; max-width:100%; }.reset-filters { display:grid; place-items:center; width:42px; height:44px; flex:none; border:1px solid #3a443a; border-radius:4px; background:transparent; color:var(--muted); }.reset-filters svg { width:17px; height:17px; }
.video-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 24px; }.video-card { min-width:0; border-bottom:1px solid var(--line); padding-bottom:22px; scroll-margin-top:24px; }.video-card-image { display:block; position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#172019; }.video-card-image img { width:100%; height:100%; object-fit:cover; display:block; }.video-play-mark { position:absolute; left:12px; bottom:12px; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#0b0d0ce6; color:#fff; }.video-play-mark svg { width:15px; height:15px; fill:currentColor; }.video-card-meta { display:flex; gap:12px; justify-content:space-between; font-size:10px; margin:14px 0 9px; color:var(--muted); }.video-card h3 { font-size:16px; line-height:1.65; font-weight:600; margin:0 0 10px; overflow-wrap:anywhere; }.video-card h3 a { text-decoration:none; }.video-card > p { color:var(--muted); font-size:12px; margin:0 0 14px; }.video-card-links { display:flex; flex-wrap:wrap; gap:16px; font-size:10px; color:#c2cbbe; }.video-card-links a { display:inline-flex; align-items:center; gap:4px; text-decoration:none; }.video-card-links svg { width:13px; height:13px; }.video-card.is-selected .video-card-image { outline:2px solid var(--accent); outline-offset:-2px; }
.learning-links { border-top:1px solid var(--line); padding:30px 0; }.learning-links h2 { font-size:22px; font-weight:500; margin:0 0 20px; }.learning-links > div { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }.learning-links a { display:flex; justify-content:space-between; align-items:center; gap:8px; text-decoration:none; font-size:12px; padding:14px 0; border-bottom:1px solid var(--line); }.learning-links svg { width:16px; height:16px; }.video-policy { padding:26px 0 44px; max-width:850px; color:var(--muted); font-size:11px; }.video-policy h2 { font-size:14px; color:#d5dfd1; font-weight:500; }.site-footer { padding:30px 0 40px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }.site-footer > a:first-child { font-size:20px; color:var(--ink); text-decoration:none; font-family:"Yu Mincho",serif; }.site-footer nav { display:flex; flex-wrap:wrap; gap:22px; margin:20px 0; }.site-footer nav a { text-decoration:none; }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:1000px) { .watch-stage { grid-template-columns:minmax(0,1.5fr) minmax(250px,1fr); gap:24px; }.watch-info h2 { font-size:20px; }.video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.learning-links > div { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { .header-inner,.video-shell,.site-footer { width:calc(100% - 32px); }.header-inner { min-height:76px; gap:12px; align-items:center; }.brand { display:grid; gap:2px; }.brand strong { font-size:22px; }.brand small { font-size:8px; }.header-inner nav { gap:13px; flex-wrap:wrap; justify-content:flex-end; }.header-inner nav a { font-size:10px; }.breadcrumbs { margin:20px 0; font-size:10px; }.page-heading { margin:22px 0 24px; align-items:flex-start; }.page-heading h1 { font-size:27px; }.page-heading p:not(.eyebrow) { font-size:12px; }.collection-count { display:none; }.watch-stage { grid-template-columns:1fr; gap:20px; padding-bottom:26px; }.watch-info h2 { font-size:21px; }.watch-description { font-size:13px; }.watch-related { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; }.watch-related p { grid-column:1/-1; }.video-source { margin-top:16px; }.load-player > svg { width:48px; height:48px; padding:13px; }.load-player { gap:8px; }.load-player span { font-size:10px; }.library-heading h2 { font-size:21px; }.topic-tabs { gap:24px; }.filter-inputs { flex-wrap:wrap; gap:10px; }.video-search { flex-basis:100%; }.filter-inputs > label:not(.video-search) { flex:1; min-width:0; }.filter-inputs select { width:100%; }.video-grid { gap:28px 18px; }.video-card h3 { font-size:15px; }.video-card-meta { flex-direction:column; gap:3px; }.video-card > p { font-size:11px; }.video-card-links { gap:12px; }.learning-links a { font-size:11px; } }
@media(max-width:450px) { .video-grid { grid-template-columns:1fr; }.video-card-meta { flex-direction:row; }.video-card h3 { font-size:17px; }.video-card > p { font-size:12px; }.topic-tabs { gap:22px; }.topic-tabs button { font-size:12px; } }
.watch-info h2 { text-wrap:balance; }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }