.food-illustration{color:var(--text,#eeede2)}
.food-illustration [hidden]{display:none!important}
.food-image-tools,.food-image-tools>div{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.food-image-tools{justify-content:space-between;margin-top:8px;margin-bottom:0;gap:7px}
.food-image-tools button{font:inherit;font-size:11px;line-height:1.3;min-width:36px;min-height:40px;padding:8px;border:1px solid #7d795c;border-radius:5px;color:#e5d7b7;background:#26332b;cursor:pointer}
.food-image-tools button[aria-pressed=true]{border-color:#d8bc87;background:#3b4938;color:#fff2cf}
.food-photo-viewport{overflow:auto;max-height:490px;overscroll-behavior:contain;border:1px solid #bdaa7855;border-radius:9px;background:#0b130e;scrollbar-color:#ab996f #142019;scrollbar-width:thin}
.food-photo-stage{position:relative;min-width:100%;width:100%;line-height:0;isolation:isolate}
.food-photo-stage[data-food-scale-value="2"]{width:200%}.food-photo-stage[data-food-scale-value="3"]{width:300%}.food-photo-stage[data-food-scale-value="4"]{width:400%}
.sense-illustration .food-photo-stage>img{display:block;width:100%;max-width:none;height:auto;border:0;border-radius:0}
.food-hotspot{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);height:calc(var(--h)*1%);min-width:0;min-height:0;border:1px solid #ffe3a099;border-radius:2px;box-shadow:none;background:transparent;padding:0;line-height:1.4;color:#fff6dc;isolation:isolate;z-index:1;cursor:pointer}
.food-hotspot:hover,.food-hotspot:focus-visible,.food-hotspot.selected{border-color:#f7ffe2;background:#f4fbb90a;box-shadow:0 0 0 1px #17221e66;z-index:5}
.food-spot-number{position:absolute;left:-9px;top:-10px;width:19px;height:19px;display:grid;place-items:center;border-radius:50%;background:rgba(17,35,30,.48);color:rgba(255,245,212,.95);border:1px solid rgba(255,230,172,.64);font-size:10px;font-weight:700;text-shadow:0 1px 2px #001d10;line-height:1}
.food-hotspot.selected .food-spot-number{background:rgba(229,207,148,.7);color:#10271d;text-shadow:none}
.food-spot-tip{position:absolute;display:none;left:0;bottom:calc(100% + 9px);width:max-content;min-width:130px;max-width:220px;white-space:normal;padding:12px 14px;border:1px solid #a99a71;border-radius:5px;background:#17251ff5;color:#f5e4bd;box-shadow:0 4px 20px #0007;pointer-events:none;font-size:16px;text-align:left;line-height:1.45;z-index:7}
.food-spot-tip>span{display:block}.food-spot-tip>span+span{font-size:12px;margin-top:3px}.food-spot-tip strong{display:block;margin-top:6px;font-size:12px;font-weight:600;color:#edf0dd}
.food-tip-right .food-spot-tip{left:auto;right:0}.food-tip-below .food-spot-tip{bottom:auto;top:calc(100% + 9px)}
@media(hover:hover){.food-hotspot:hover .food-spot-tip{display:block}}
.food-hotspot.tip-dismissed .food-spot-tip{display:none!important}
.food-hide-numbers .food-spot-number{visibility:hidden}.food-illustration.food-hide-marks .food-hotspot{border-color:transparent;background:transparent;box-shadow:none}
.food-image-actions{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:5px 10px;margin-top:8px;font-size:10px;line-height:1.5;color:var(--muted,#b9bbae)}
.food-image-actions a{display:inline-block;padding:5px 0}
.food-inspector{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:4px 12px;margin-top:12px;padding:15px;border:1px solid #62695b;border-radius:8px;background:#1b2420;line-height:1.5;min-width:0}
.food-inspector>*{grid-column:1;min-width:0}.food-inspector .food-inspector-close{position:absolute;right:3px;top:3px;min-width:40px;min-height:40px;border:0;background:transparent;color:#e3cf9d;cursor:pointer;font:inherit}
.food-inspector .food-inspector-number{grid-column:1 / -1;padding-right:30px;margin:0 0 6px;font-size:10px;letter-spacing:1px;color:#dfc38c}
.food-inspector .food-inspector-japanese{font-size:23px;line-height:1.4;margin:0;color:#f1d7a6;overflow-wrap:anywhere}
.food-inspector .food-inspector-reading{font-size:12px;margin:0;color:#d1d9cd;overflow-wrap:anywhere}.food-inspector .food-inspector-meaning{font-size:15px;margin:6px 0;overflow-wrap:anywhere}
.food-inspector .food-inspector-crop{grid-column:2;grid-row:2 / span 3;display:flex;align-items:center;overflow:hidden;border-radius:5px;background:#111a14;min-width:0;height:105px}
.food-inspector-crop svg{display:block;width:100%;height:100%}
.food-inspector .food-inspector-word{grid-column:1 / -1;font-size:12px;line-height:1.6;padding:6px 0;overflow-wrap:anywhere}
.food-image-index{margin-top:10px;line-height:1.5;font-size:12px}.food-image-index>summary{min-height:38px;padding:9px 0;cursor:pointer;color:var(--gold,#e8c48b)}.food-image-index>summary>span{color:var(--muted);margin-left:5px}
.food-image-index ol{list-style:none;padding:0;margin:5px 0;display:grid;gap:6px}.food-image-index li{margin:0;padding:0;border:0}.food-image-index button{display:flex;align-items:center;gap:10px;min-height:46px;width:100%;padding:9px 10px;text-align:left;color:#eee6cc;background:#26332b;border:1px solid #58634e;border-radius:5px;font:inherit;cursor:pointer}
.food-image-index button.selected{border-color:#e2ce99;background:#364632}.food-image-index small{display:block;font-size:11px;line-height:1.5;color:#c9d2bf}.food-list-number{flex:0 0 18px;font-size:10px;color:#e6c88d}
.food-scene-status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}
.food-illustration button:focus-visible,.food-illustration summary:focus-visible,.food-photo-viewport:focus-visible{outline:2px solid #f5db9d;outline-offset:3px}
@media(max-width:800px){.food-spot-tip{display:none!important}.food-photo-viewport{max-height:390px}.food-spot-number{width:17px;height:17px;font-size:9px}}
@media(max-width:380px){.food-inspector{grid-template-columns:minmax(0,1fr) 70px;padding:12px;gap:3px 8px}.food-inspector .food-inspector-japanese{font-size:20px}.food-inspector .food-inspector-crop{height:90px}.food-image-tools button{font-size:10px;padding:7px;min-height:38px}}

.food-image-frame{position:relative}
.food-single .food-hotspot,.food-single .food-hotspot:hover,.food-single .food-hotspot.selected{left:0;top:0;width:100%;height:100%;border:0;box-shadow:none;background:transparent}
.food-single .food-hotspot:focus-visible{outline-offset:-4px}
.food-single-label{position:absolute;left:12px;top:12px;max-width:calc(100% - 24px);width:max-content;padding:12px 14px;border:1px solid #a99a71;border-radius:5px;background:#17251ff5;color:#f5e4bd;box-shadow:0 4px 20px #0007;pointer-events:none;font-size:15px;text-align:left;line-height:1.45;z-index:7;overflow-wrap:anywhere}
.food-single-label strong,.food-single-label small,.food-single-label span{display:block}.food-single-label strong{font-size:18px;font-weight:500}.food-single-label small{font-size:12px;margin-top:3px}.food-single-label span{font-size:12px;margin-top:5px;color:#edf0dd}

.food-details{position:relative;margin-top:12px;padding:15px;border:1px solid #62695b;border-radius:8px;background:#1b2420;min-width:0}
.food-details .food-inspector{position:static;margin:0;padding:0;border:0;border-radius:0;background:transparent}
.food-details .food-image-index{margin:0}
.food-details .food-inspector:not([hidden])+.food-image-index{margin-top:12px;padding-top:8px;border-top:1px solid #62695b}
@media(max-width:380px){.food-details{padding:12px}}

/* A label belongs to the image frame, outside the zoom/scroll viewport. */
.food-has-floating-tip .food-hotspot .food-spot-tip{display:none!important}
.food-image-frame>.food-floating-tip{display:block;bottom:auto;right:auto;box-sizing:border-box;min-width:0;max-width:min(248px,calc(100% - 16px));max-height:calc(100% - 16px);overflow:hidden;z-index:8}