/* v10: selected-palette tubes and a full information dialog. */
.palette-panel .palette-swatches{display:flex;align-items:flex-start;justify-content:flex-start;gap:6px;flex-wrap:wrap;padding:3px 2px 6px;margin:6px 0;max-height:176px;overflow-y:auto;overflow-x:hidden}
.palette-tube{position:relative;display:flex;flex-direction:column;align-items:center;width:27px;height:79px;padding:0;border:0;border-radius:0;background:none;flex:0 0 27px;cursor:pointer;filter:drop-shadow(1px 3px 2px #0008);transition:transform .12s}
.palette-tube:hover{transform:translateY(-2px)}.palette-tube:focus-visible{outline:2px solid #e1c996;outline-offset:3px}
.mini-crimp{display:block;flex:none;width:25px;height:4px;border:1px solid #9fa38e;border-radius:1px;background:repeating-linear-gradient(0deg,#c7c8b7 0 1px,#727969 1px 2px)}
.mini-body{position:relative;display:block;flex:none;width:25px;height:59px;background:linear-gradient(90deg,#fff5,transparent 28%,transparent 65%,#0006),var(--paint);border:1px solid #b1b5a388;border-radius:1px 1px 8px 8px;box-shadow:inset 1px 0 1px #eef0dba0,inset -2px 0 2px #0005}
.mini-name{position:absolute;width:54px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);font-family:Arial,sans-serif;font-size:6.4px;font-weight:700;line-height:8px;color:var(--paint-text);text-align:center;overflow-wrap:normal;max-height:24px;overflow:hidden;text-shadow:0 1px 1px #0001;direction:ltr}
.mini-neck{display:block;flex:none;width:10px;height:4px;background:linear-gradient(90deg,#bdc1ad,#727965,#a2a790)}
.mini-cap{display:block;flex:none;width:13px;height:10px;border:1px solid #7b826d77;border-radius:1px 1px 3px 3px;background:repeating-linear-gradient(90deg,#46503f 0 1px,#232d22 1px 3px);box-shadow:inset 0 -2px 1px #0008}
.palette-info-trigger{display:block;width:100%;text-align:start;border-top:1px solid #65533d55;padding:7px 0 0;margin-top:3px;font-size:.7rem}
#palette-info-dialog{position:fixed;inset:0;margin:auto;width:min(560px,calc(100vw - 32px));max-width:none;height:fit-content;max-height:calc(100dvh - 48px);overflow:auto;padding:24px;border:1px solid #827055;border-radius:12px;background:#22211f;color:#e6dac5;box-shadow:0 24px 80px #000b;direction:rtl}
#palette-info-dialog::backdrop{background:#0008;backdrop-filter:blur(3px)}
#palette-info-dialog .dialog-heading{margin-bottom:17px;align-items:center}
#palette-info-dialog h2{font-size:1.15rem;margin:0}
#palette-info-dialog p,#palette-info-dialog li{font-size:.9rem;line-height:1.9;color:#d7ccba}
#palette-info-dialog ul{padding-inline-start:22px}
#palette-info-dialog a{font-size:.8rem;color:#c7b88f;margin-top:15px}
html[dir=ltr] #palette-info-dialog{direction:ltr}
.head-camera-controls{position:static}
.head-camera-controls>summary{position:absolute;top:var(--light-button-top,20px);left:50%;transform:translateX(-50%);margin:0;z-index:7}
.head-stage:before{height:calc(var(--hanger-y,24%) - var(--hanger-top,-32px) - 32px)}
@media(max-width:759px){.head-stage:before{height:calc(var(--hanger-y,24%) - 6px)}.palette-panel .palette-swatches{gap:8px}.palette-tube{width:29px;flex-basis:29px}.mini-body{width:27px}.mini-crimp{width:27px}#palette-info-dialog{padding:20px}.mini-name{font-size:6.8px}}
@media(prefers-reduced-motion:reduce){.palette-tube{transition:none}}
/* A slight size increase only for the mixture tubes over the reference. */
.recipe .ingredient{width:154px;left:-204px;top:-13.5px;transform-origin:204px 13.5px}
.recipe .ingredient-track{height:27px;min-height:27px}
.recipe .ingredient-track strong{font-size:9px;line-height:17px;font-weight:700;padding:4px;text-shadow:0 1px 2px #000,0 0 1px #000}
.recipe .tube-crimp{height:26px}.recipe .tube-neck{height:17px}.recipe .tube-cap{height:20px;width:12px}